上一篇：父子組件間單向數(shù)據(jù)流的解決辦法
非父子組件之間的通信，可以通過(guò)一個(gè)空的 Vue 實(shí)例作為中央事件總線（事件中心），用他來(lái)觸發(fā)事件和監(jiān)聽(tīng)事件双肤。
在這里，如果是工作中的新手看了官網(wǎng)的例子直接上手寫(xiě)钮惠，會(huì)有些發(fā)懵茅糜。這個(gè)作為事件總線空的 Vue 實(shí)例我該寫(xiě)哪里去？因?yàn)楣ぷ髦形覀兊慕M件都是互相獨(dú)立的素挽，不可能寫(xiě)一起的蔑赘，作用域是不同的，所以需要稍作調(diào)整
一预明、在 main.js 中初始化根 Vue 之前缩赛，添加一個(gè) data 對(duì)象，內(nèi)寫(xiě)入一個(gè)名為 Event 的空 Vue 對(duì)象撰糠，也就是中央事件總線
new Vue({
el: '#app',
data:{
Event: new Vue()
},
render: h => h(App)
})
二酥馍、在各組件中使用 Vue 的實(shí)例屬性 $root 來(lái)訪問(wèn)我們當(dāng)前組件樹(shù)的根 Vue 實(shí)例，這樣就可以使用
vm.$root.Event 來(lái)訪問(wèn)我們定義的事件發(fā)射器 Event
比如我在 Hello.vue 組件中想發(fā)送數(shù)據(jù)到 Vue.vue 組件中
<template>
<div class="hello">
<h3>我是 {{name}} 組件</h3>
<button @click="send">發(fā)送數(shù)據(jù)到Vue組件中</button>
</div>
</template>
<script>
export default {
data(){
return {
name: 'Hello'
}
},
methods:{
send(){
// 觸發(fā)組件 Hello 中的事件
// $emit(事件名阅酪，數(shù)據(jù)）
this.$root.Event.$emit('hello',this.name)
}
}
}
</script>
在 Vue.vue 組件中進(jìn)行接收
<template>
<div class="Vue">
<h3>我是 {{name}} 組件</h3>
</div>
</template>
<script>
export default {
data(){
return {
name: ''
}
},
mounted(){
// 在組件 Vue 創(chuàng)建的鉤子中監(jiān)聽(tīng)事件
// $on(事件名旨袒，數(shù)據(jù)）
this.$root.Event.$on('hello',name => {
this.name = name
})
}
}
</script>
這樣就可以實(shí)現(xiàn)數(shù)據(jù)的通信了
非父子組件通信
如果在組件間通信復(fù)雜的情況下，我們應(yīng)該考慮使用專門(mén)的 狀態(tài)管理模式 vuex
