1.父組件傳遞數(shù)據(jù)給子組件
父組件數(shù)據(jù)如何傳遞給子組件呢？可以通過(guò)props屬性來(lái)實(shí)現(xiàn)
父組件：
//這里必須要用 - 代替駝峰
data(){ return { msg: [1,2,3] }; }
子組件通過(guò)props來(lái)接收數(shù)據(jù): 方式1：
props: ['childMsg']
方式2 :
props: { childMsg: Array //這樣可以指定傳入的類(lèi)型，如果類(lèi)型不對(duì)，會(huì)警告 }
方式3：
props: { childMsg: { type: Array, default: [0,0,0] //這樣可以指定默認(rèn)的值 } }
這樣呢，就實(shí)現(xiàn)了父組件向子組件傳遞數(shù)據(jù).
【案例演示1】
父組件里面的內(nèi)容
子組件里面的內(nèi)容
注意：這里的第一個(gè)父組件傳值給子組件分為傳引用和傳值兩種方式，傳引用的時(shí)候改變引用關(guān)系，則子組件的也會(huì)變化（改變父組件中數(shù)組的引用時(shí)可以看到子組件的props數(shù)組隨之改變，而子組件中綁定的數(shù)組確并沒(méi)有隨之改變）傳值則不會(huì)
2.子組件與父組件通信
那么，如果子組件想要改變數(shù)據(jù)呢？這在vue中是不允許的，因?yàn)関ue只允許單向數(shù)據(jù)傳遞，這時(shí)候我們可以通過(guò)觸發(fā)事件來(lái)通知父組件改變數(shù)據(jù)，從而達(dá)到改變子組件數(shù)據(jù)的目的.
子組件: <div @click="up">
methods: { up() { this.$emit('upup','hehe'); //主動(dòng)觸發(fā)upup方法，'hehe'為向父組件傳遞的數(shù)據(jù) } }
父組件:
//監(jiān)聽(tīng)子組件觸發(fā)的upup事件,然后調(diào)用change方法
methods: { change(msg) { this.msg = msg; } }
【案例演示2】
父組件里面的內(nèi)容
子組件里面的內(nèi)容
注意：簡(jiǎn)而言之就是先子組件定義一個(gè)事件，然后通過(guò)$emit方式
傳遞過(guò)去一個(gè)事件名稱(chēng)，，父組件首先在html上用@事件名######="子組件自定義事件名"來(lái)接受，最后就是調(diào)用父組件剛剛定義的######事件，傳入一個(gè)參數(shù)，就可以接收來(lái)自子組件的事件觸發(fā)及其參######數(shù)傳遞。
大家可以參考這篇文章https://www.cnblogs.com/LoveAndPeace/p/7273648.html
3.非父子組件通信
如果2個(gè)組件不是父子組件那么如何通信呢？這時(shí)可以通過(guò)eventHub來(lái)實(shí)現(xiàn)通信. 所謂eventHub就是創(chuàng)建一個(gè)事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來(lái)傳遞事件和接收事件.
let Hub = new Vue(); //創(chuàng)建事件中心
組件1觸發(fā)：
methods: { eve() { Hub.on('change', () => { //Hub接收事件 this.msg = 'hehe'; }); }
這樣就實(shí)現(xiàn)了非父子組件之間的通信了.原理就是把Hub當(dāng)作一個(gè)中轉(zhuǎn)站！
以下是詳細(xì)代碼
<meta charset="utf-8">
Vue 官網(wǎng)介紹了非父子組件通信方法：
不過(guò)官網(wǎng)說(shuō)的太簡(jiǎn)單了，新手看完估計(jì)還是一臉懵逼。還有這個(gè)空的 Vue 實(shí)例放到哪里合適也值得商榷。
這篇文章的目的就是用一個(gè)簡(jiǎn)單的例子讓你明白如何用 Bus ?? 來(lái)進(jìn)行通信：
假設(shè) bb 組件里面有個(gè)按鈕，點(diǎn)擊按鈕，把 123 傳遞給 aa 組件
// 根組件（this.$root)
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
// 空的實(shí)例放到根組件下，所有的子組件都能調(diào)用
Bus: new Vue()
}
})
bb 組件內(nèi)調(diào)用事件觸發(fā)↓
<button @click="submit">提交<button>
methods: {
submit() {
// 事件名字自定義，用不同的名字區(qū)別事件
this.$root.$emit('eventName', 123)
}
}
aa 組件內(nèi)調(diào)用事件接收↓
// 當(dāng)前實(shí)例創(chuàng)建完成就監(jiān)聽(tīng)這個(gè)事件
created(){
this.$root.$on('eventName', value => {
this.print(value)
})
},
methods: {
print(value) {
console.log(value)
}
},
// 在組件銷(xiāo)毀時(shí)別忘了解除事件綁定
beforeDestroy() {
this.$root.Bus.$off('eventName')
},
我自己的實(shí)踐：
1、這是父組件app.vue，分別有兩個(gè)子組件input和dialog
注意：這里一定要引入vue不然會(huì)報(bào)錯(cuò)
1、這是一個(gè)輸入框組件，通過(guò)輸入觸發(fā)change事件，給彈出框組件傳值
***關(guān)鍵詞：通過(guò)$emit觸發(fā)事件
2、這是一個(gè)彈出框組件，通過(guò)監(jiān)聽(tīng)輸入框組件的change事件傳過(guò)來(lái)的值來(lái)判斷是否彈出
***關(guān)鍵詞：通過(guò)$on接收事件
這樣就可以了，是不是很簡(jiǎn)單？
問(wèn)題一：如果有多個(gè)組件組件需要通信，是不是要在根組件上多建幾個(gè) Bus？
答：不需要的，只要保證事件名 （eventName）不一樣就行了。
問(wèn)題二：為什么要弄個(gè) Bus？直接 this.on、this.
emit 不更簡(jiǎn)單粗暴？
答：按照文檔上的說(shuō)法是專(zhuān)門(mén)用一個(gè)空的 Vue 實(shí)例（Bus）來(lái)做中央事件總線更加清晰也易于管理。
可以參考我最新的文章關(guān)于兄弟組件之間的通信：
http://www.lxweimin.com/p/3e7b62e0bbf7
