SOURCE

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义属性
  // 这个属性名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}----{{ todo.name }}</li>'
})

let vm = new Vue({
  el: '#app',
  data: {
    groceryList: [
      { text: '蔬菜', name: '菜'},
      { text: '奶酪', name: '酪' },
      { text: '随便其他什么人吃的东西', name: '随' }
    ]
  }
})

<div id="app">
  <ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>