三、组件与实例的关系，组件间怎么发生通信（父组件向子组件传值）

每一个Vue的组件都是一个Vue的实例，像实例一样，组件里也可以有template实例，也可以有methods等等。我们以后就统说成实例或者是组件。

组件与组件间怎么发生通信呢？
依然沿用上面的例子，做一个需求：当点击li标签的时候，弹出一个“clicked”的弹框，用全局组件编写这个需求。

body>
    

        

            
            提交
        
        

            
            
        
    
    
    

浏览器中，点击提交，点击li标签的内容后，会出来一个“clicked”的弹框：

image.png

这个代码里面有一个Vue实例和一个Vue全局组件。
Vue实例创建了输入框内的hello和空的list项，还创建了一个handleSubmit方法，该方法在点击提交后，把在输入框中的内容导进了list项中，然后抹掉了输入框中的数据。
Vue组件创建了一个名叫todo-item全局组件，该组件创建了一个li标签和一个handleClick方法，该方法是在点击li标签内容的时候，弹出一个clicked的弹窗。

这样就出现了一个问题，在Vue实例中创建的list数组中的项，这些项会在Vue组件中的li标签中显示出来，但这个项怎么传达到Vue组件当中？
可以认为Vue实例是一个父组件，component是一个子组件，在ul标签内，item将数据传给了content属性，在子组件中，通过props接收了content属性的内容，然后在子组件中的模板中显示出来。
所以在ul标签中todo-item实现了从父组件中的值传给某一个属性，然后这个属性传给了子组件，这样形成了父组件向子组件的数据传递。
有一点需要注意：子组件接收从父组件传递过来的内容，但是不可以修改从父组件传递过来的内容（修改会报错）
但如果我一定有修改那个子组件的需求，怎么办?
可以在data内创建一个数据，将从父组件传过来的值复制到这个data内，利用上面的例子，大致操作如下：

 props:['content'],
data:function() {
    return {
        number:this.count
    }
}

然后子组件后面操作就可以用number来操作，而不是操作父组件传来的count。
既然有了从父组件向子组件传递数据，那么也有从子组件向父组件传递数据，这个得看下一节