Vue – Vue.component 組件教學 – 使用 v-bind、v-for、x-template

剛學到 Vue.component 這部分的參數傳遞,覺得繞來繞去真的不是很好理解。重複寫了約 5 次左右才弄清楚一些步驟與參數的關係。下面就依照建立的順序來解說。

官方教學點我

影片教學

1. 先建構 HTML 框架

<ol> 底下將會是放置我們需要循環的列表

2. 設定好 Vue 與即將輸入的 JSON 資料

data 中放置自訂參數 cart,內容需要 JSON 數據

3. 擺放準備讓資料循環的的模板位置

我們看增加的這行。這裡開始的數據傳遞一開始比較不好理解,我在底部有附圖可以參考

  • 我自訂組件名稱為 c-cart (component-cart 簡寫),標籤寫法就寫成 <c-cart> 即可。注意,不可與 HTML 標籤相同,例如取名 <menu> <header> … 否則無法作用。
  • v-for 的屬性也就是 for loop 的意思。val 從 cart 中逐一取出
  • v-bind 綁定的接口名稱,我們自訂名稱為 item
  • 接口 item 代入的值為 val,這個 val 由 cart 取出

4. 製作組件,並將組建位置放在 new Vue 初始之前。

  • c-cart 也就是對應 <c-cart>
  • 接口承接的名稱 ‘item’,將被模板當成物件

5. 完成

6. 關係圖

我將上方的建立步驟,分成 1 ~ 3 並搭配箭頭,應該就好懂多了。

模版也改使用 text/x-template

如果不要將模版寫在 Vue 內部的話,可以參考

  1. 將模版用 <script type=”text/x-template”> 包圍後,增加 ID
  2. component 的部分,將參數 template 指定為 ID

<script type=”text/x-template”> 我自己測試,也可以使用 <template> 包圍。最後程式碼就變成

Comments

發表迴響