二、todolist组件拆分

什么是组件？
组件就是页面上的某一部分，当做的一个网页很庞大的时候，可以把网页拆成几个部分，每一部分就是一个组件，当一个网页变成一个个组件的时候，每个组件相对维护简单。
这就涉及两个问题：1、怎么创建组件？2、每个独立的组件间怎么发生通信
1、创建组件
component是Vue提供的创建组件的方法，看下面的例子：

Vue.component('todo-item',{template:'
item
'})

Vue创建了一个组件，名字叫todo-list，组件里面只有一个模板，是li标签。
下面是插入后的样子：

    

        

            
            提交
        
        

            
        
    
    
    

component创建的名为todo-list的组件，在ul标签中应用该组件名，可以将该组件用在此ul标签内。
写该组件，与在ul标签中直接写该组件的内容，效果一样。

通过Vue.component定义的组件称为全局组件，全局组件定义好后，可以在任何地方的模板里都可以使用该组件。

除了全局组件，当然还有一种组件叫局部组件。同样在script标签内创建，形式如下：

var TodoItem = {
            template:'
item
'
        }

这样就定义了一个局部组件，名字叫TodoItem。
但是如果这样定义后就想调用调用这个组件，是调用不了的，若想调用此局部组件，需要在Vue实例中用components做一个组件的声明：

components:{
                'todo-item':TodoItem
            }

这样的话，局部组件的名字（TodoItem）与ul标签中引用的引用名字（todo-item）做了一个绑定，这样局部组件就可以使用了。