记Vue学习经历-------组件和数据绑定使用

前面已经明白了组件如何使用，但这样每次调用组件都只会展示相同的内容，下面我们将数据传递到组件内进行使用

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

这里多了个props参数，props在Vue里用于父组件向子组件传递数据，这里传递的数据为todo，同时关联Vue和DOM，并初始化一组数据

Vue.component('todo-item',{
    props:['todo'],
    template:'<li>{{todo.text}}</li>'
});    

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

 下面在HTML中调用组件并展示这些数据

<div id="app">
    <ol>
        <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"></todo-item>
    </ol>
</div>

其中v-for用于绑定数组的数据，groceryList为数组数据，item为遍历数组数据时每一项的临时名称，v-bind:todo="item"将item数据传递到组件里的todo

运行效果如下