上一篇：父子組件間單向數(shù)據(jù)流的解決辦法
非父子組件之間的通信，可以通過一個空的 Vue 實例作為中央事件總線（事件中心），用他來觸發(fā)事件和監(jiān)聽事件。
在這里，如果是工作中的新手看了官網(wǎng)的例子直接上手寫，會有些發(fā)懵。這個作為事件總線空的 Vue 實例我該寫哪里去？因為工作中我們的組件都是互相獨立的，不可能寫一起的，作用域是不同的，所以需要稍作調(diào)整
一、在 main.js 中初始化根 Vue 之前，添加一個 data 對象，內(nèi)寫入一個名為 Event 的空 Vue 對象，也就是中央事件總線
new Vue({
el: '#app',
data:{
Event: new Vue()
},
render: h => h(App)
})
二、在各組件中使用 Vue 的實例屬性 $root 來訪問我們當前組件樹的根 Vue 實例，這樣就可以使用
vm.$root.Event 來訪問我們定義的事件發(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 組件中進行接收
<template>
<div class="Vue">
<h3>我是 {{name}} 組件</h3>
</div>
</template>
<script>
export default {
data(){
return {
name: ''
}
},
mounted(){
// 在組件 Vue 創(chuàng)建的鉤子中監(jiān)聽事件
// $on(事件名，數(shù)據(jù)）
this.$root.Event.$on('hello',name => {
this.name = name
})
}
}
</script>
這樣就可以實現(xiàn)數(shù)據(jù)的通信了
非父子組件通信
如果在組件間通信復(fù)雜的情況下，我們應(yīng)該考慮使用專門的 狀態(tài)管理模式 vuex
