什么是组件？
组件就是页面上的某一部分，当做的一个网页很庞大的时候，可以把网页拆成几个部分，每一部分就是一个组件，当一个网页变成一个个组件的时候，每个组件相对维护简单。
这就涉及两个问题：1、怎么创建组件？2、每个独立的组件间怎么发生通信
1、创建组件
component是Vue提供的创建组件的方法，看下面的例子：
Vue.component('todo-item',{template:'<li>item</li>'})
Vue创建了一个组件，名字叫todo-list，组件里面只有一个模板，是li标签。
下面是插入后的样子：
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{template:'<li>item</li>'})
new Vue({
el:"#root",
data:{
inputValue:'hello',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue =''
}
}
})
</script>
</body>
component创建的名为todo-list的组件，在ul标签中应用该组件名，可以将该组件用在此ul标签内。
写该组件，与在ul标签中直接写该组件的内容，效果一样。
通过Vue.component定义的组件称为全局组件，全局组件定义好后，可以在任何地方的模板里都可以使用该组件。
除了全局组件，当然还有一种组件叫局部组件。同样在script标签内创建，形式如下：
var TodoItem = {
template:'<li>item</li>'
}
这样就定义了一个局部组件，名字叫TodoItem。
但是如果这样定义后就想调用调用这个组件，是调用不了的，若想调用此局部组件，需要在Vue实例中用components做一个组件的声明：
components:{
'todo-item':TodoItem
}
这样的话，局部组件的名字（TodoItem）与ul标签中引用的引用名字（todo-item）做了一个绑定，这样局部组件就可以使用了。
网友评论