微信訂閱號：Rabbit_svip
本節(jié)所需的基礎(chǔ)知識：
任意組件相互通信或者說兄弟（平級）組件相互通信有2個解決方案。
【方案 1】通過父組件進行通信 （不推薦）
思路如下圖所示
微信訂閱號：Rabbit_svip
這種方法不推薦使用
因為如果組件的關(guān)系結(jié)構(gòu)更復(fù)雜的話，用這種方式來傳參將會變得十分麻煩。所以這里不會講解這種做法（如果懂組件的父子通信的話，完全可以根據(jù)這個思路寫出這種通信方式。）。
【方法 2】總線通信（五星推薦）
微信訂閱號：Rabbit_svip
1、首先在公共區(qū)域建立一條總線，用來接收所有組件傳過來的參數(shù)。
2、把參數(shù)傳給其他有需要的組件。
這種方法可以避免【方法 1】因為組件層級關(guān)系復(fù)雜而導(dǎo)致傳參麻煩的問題。
具體做法如下所示：
<!-- HTML代碼 -->
<div id="app">
<lecturer></lecturer>
<audience></audience>
</div>
/* javascript代碼 */
// 設(shè)置總線，一個外部的調(diào)度器var Event = new Vue();// 新建一個組件（產(chǎn)生數(shù)據(jù)的組件）Vue.component('lecturer', { // 設(shè)置組件模板
template: `
<div>
演講者：<input @keyup="recite" v-model="poem"> </div>`,
data: function () {
return {
poem: ''
}
},
methods: {
recite: function() {
// 通過 $emit 定義一個名字，把值保存到這個空間里 。
Event.$emit('poem-details', this.poem);
}
}
})
// 新建一個組件（接收數(shù)據(jù)的組件）
Vue.component('audience', {
template: ` <div>
觀眾聽到：{{lecturer_said}} </div>`,
data: function() {
return {
lecturer_said: ''
}
},
// mounted是一個鉤子函數(shù)，在該組件掛載時執(zhí)行
mounted: function() {
var that = this;
// 通過 $on 進行監(jiān)聽，poem-details 是被監(jiān)聽的對象。
Event.$on('poem-details', function(data) {
that.lecturer_said = data
})
}
})
new Vue({
el: '#app'
})
1、在所有組件最上面，設(shè)置一條總線，也可以說是一個外部的調(diào)度器。
var Event = new Vue();
2、在 lecturer 組件中，定義一個事件，通過該事件觸發(fā)Event.emit( ‘參數(shù) 1’， ‘參數(shù)2’ );
參數(shù)1：定義一個名字
參數(shù)2：需要傳過來的值（可以是一個數(shù)組或?qū)ο螅?/p>
3、在 audience 組件中，通過鉤子函數(shù)（mounted）在組件掛載時調(diào)用 Event.$on 監(jiān)聽 lecturer 組件傳過來的東西。然后通過一個函數(shù)修改 audience 的數(shù)據(jù)。
