【Vue.js學習筆記】自定義元件

創建一個元件

// 定義名為 todo-item 的新元件
Vue.component('todo-item', {
  template: '<li>待辦事項</li>'
})

呼叫 todo-item 元件

<ol>
  <todo-item></todo-item>
</ol>

但以上程式碼的呈現為靜態,若是想讓內容變為可動態更動,可以使用props自定義一個屬性:

Vue.component('todo-item', {
  props: ['todo'], //自定義一個屬性為todo
  template: '<li>{{ todo.text }}</li>'
})

並且使用 v-bind 將data綁進元件中:

<div id="app">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
    ></todo-item>
  </ol>
</div>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
  el: '#app',
  data: {
    groceryList: [
      { text: '蔬菜' },
      { text: '奶酪' },
      { text: '隨便' }
    ]
  }
})

這段程式碼先使用 v-for 遍歷 groceryList 這個array,並將提出的元素用 v-bind 傳入todo這個自定義屬性中,Vue就會透過template存取todo來動態生成元件。

效果

  1. 蔬菜
  2. 奶酪
  3. 隨便
0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論