每一個Vue的組件都是一個Vue的實(shí)例，像實(shí)例一樣，組件里也可以有template實(shí)例，也可以有methods等等。我們以后就統(tǒng)說成實(shí)例或者是組件。

組件與組件間怎么發(fā)生通信呢？
依然沿用上面的例子，做一個需求：當(dāng)點(diǎn)擊li標(biāo)簽的時候，彈出一個“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>

瀏覽器中，點(diǎn)擊提交，點(diǎn)擊li標(biāo)簽的內(nèi)容后，會出來一個“clicked”的彈框：

image.png

這個代碼里面有一個Vue實(shí)例和一個Vue全局組件。
Vue實(shí)例創(chuàng)建了輸入框內(nèi)的hello和空的list項(xiàng)，還創(chuàng)建了一個handleSubmit方法，該方法在點(diǎn)擊提交后，把在輸入框中的內(nèi)容導(dǎo)進(jìn)了list項(xiàng)中，然后抹掉了輸入框中的數(shù)據(jù)。
Vue組件創(chuàng)建了一個名叫todo-item全局組件，該組件創(chuàng)建了一個li標(biāo)簽和一個handleClick方法，該方法是在點(diǎn)擊li標(biāo)簽內(nèi)容的時候，彈出一個clicked的彈窗。

這樣就出現(xiàn)了一個問題，在Vue實(shí)例中創(chuàng)建的list數(shù)組中的項(xiàng)，這些項(xiàng)會在Vue組件中的li標(biāo)簽中顯示出來，但這個項(xiàng)怎么傳達(dá)到Vue組件當(dāng)中？
可以認(rèn)為Vue實(shí)例是一個父組件，component是一個子組件，在ul標(biāo)簽內(nèi)，item將數(shù)據(jù)傳給了content屬性，在子組件中，通過props接收了content屬性的內(nèi)容，然后在子組件中的模板中顯示出來。
所以在ul標(biāo)簽中todo-item實(shí)現(xiàn)了從父組件中的值傳給某一個屬性，然后這個屬性傳給了子組件，這樣形成了父組件向子組件的數(shù)據(jù)傳遞。
有一點(diǎn)需要注意：子組件接收從父組件傳遞過來的內(nèi)容，但是不可以修改從父組件傳遞過來的內(nèi)容（修改會報(bào)錯）
但如果我一定有修改那個子組件的需求，怎么辦?
可以在data內(nèi)創(chuàng)建一個數(shù)據(jù)，將從父組件傳過來的值復(fù)制到這個data內(nèi)，利用上面的例子，大致操作如下：

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

然后子組件后面操作就可以用number來操作，而不是操作父組件傳來的count。
既然有了從父組件向子組件傳遞數(shù)據(jù)，那么也有從子組件向父組件傳遞數(shù)據(jù)，這個得看下一節(jié)