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

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

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

body>
    <div id="root">
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item
            v-for="(item, index) of list"
            :key="index"
            :content="item"
            >
            </todo-item>
        </ul>
    </div>
    
    <script>
        Vue.component('todo-item',{
            props:['content'],
            template:'<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function(){
                    alert('clicked')
                }
            }
        })
        new Vue({
            el:"#root",
            data:{
                inputValue:'hello',
                list:[]
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue =''
                }
            }
        })
    </script>
</body>

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

这个代码里面有一个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。
既然有了从父组件向子组件传递数据，那么也有从子组件向父组件传递数据，这个得看下一节