Vue组件应用构建

Vue中，一个组件本质上是一个拥有预定义选项的一个Vue实例。
在Vue中注册组件

//定义名为todo-item的新组件
Vue.component('todo-item',{
template: '<li>这是个代办项</li>'
})
var app = new Vue(...)

现在可以用它构建另一个组件模版

<ol>
	//创建一个todo-item组件的实例
	<todo-item></todo-item>
</ol>

上面的缺点：会会每个代办项渲染同样的文本。
我们应该从父作用域将数据传到子组件才对。
需要修改一下组件的定义，使之接受一个prop：

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

现在可以使用v-bind指令将待办项传到循环输出的每个组件中。

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

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

var app7 = new Vue({
	el:'#app-7',
	data:{
	groceryList:[
	{id: 0, text:'apple'},
	{id: 1, text:'pear'},
	{id: 2, text:'orange'}
]
}	
})

子组件通过prop接口和父组件进行了良好的结偶。