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

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

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

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

 1 Vue.component('todo-item',{
 2     props:['todo'],
 3     template:'<li>{{todo.text}}</li>'
 4 });    
 5 
 6 var app=new Vue({
 7     el:'#app',
 8     data:{
 9         groceryList:[
10             {id:0,text:'蔬菜'},
11             {id: 0, text : '奶酪'},
12             {id: 0, text: '随便其他什么人吃的东西'}
13         ]
14     }
15 });

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

1 <div id="app">
2     <ol>
3         <todo-item
4             v-for="item in groceryList"
5             v-bind:todo="item"></todo-item>
6     </ol>
7 </div>

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

运行效果如下