用vue EventBus來進行組件溝通吧！

在vue組件中想必大家已經很習慣用props、emit 來進行組件之間的溝通， 但遇到層級比較深的狀況就會比較困擾，用家族關係來比喻，如果想要傳遞訊息給某個表妹的話，要先傳給父親再傳給阿嬤，阿嬤再傳給姑姑，姑姑再傳給表妹，光聽就累了…有沒有什麼方法可以繞過這些重重關卡直接溝通？就可以利用vue的EventBus來達成。

範例的結構如下圖，為index內各有兩個子component，並且各自擁有自己的子component，利用eventBus來實作memberCenterItem與customerServiceItem的組件溝通。

這是index.vue的結構

起手式在src資料夾底下新增bus.js（名稱隨意，能夠識別功能即可），在vue的原型上掛載一個vue實例

記得要在main.js引用bus.js

在memberCenterItem component裡點擊標題會發送事件，寫法跟原本的 $emit幾乎一模一樣

this.$bus.$emit('事件',data) //如一般$emit一樣 可夾帶data

在customerServiceItem component created時註冊監聽事件，並且可以拿到另一邊送過來的資料

this.$bus.on('事件',獲取資料後要做的callback)

備註：避免重複監聽的問題，在組件銷毀之前記得取消監聽

this.$bus.$off('事件')

可以看到組件溝通成功！

假設不想額外寫一支js ，也可以直接在main.js，在vue的原型上註冊一個vue實例

也可以做到一樣的功能

不過我天真的以為監聽事件組件在沒被渲染的情況下，也可以觸發監聽事件，（如同下面的情形）實際測試沒被渲染的組件根本不會經過created階段啊..無法綁定監聽事，自然會溝通失敗。