vue2.0中eventBus實現兄弟組件通信

咱們知道，在vue中父子組件的通信是經過props和自定義事件搞定的，簡單那的非父子組件通信用bus（一個空的Vue實例），針對中大型的項目會選擇vuex，然而小項目的話，便捷的解決方案就是eventBus。

 

官網相關描述在：$dispatch和$broadcast替換  一節中。提到：

$dispatch 和 $broadcast 也沒有解決兄弟組件間的通訊問題。對於$dispatch 和 $broadcast最簡單的升級方式就是：經過使用事件中心，容許組件自由交流，不管組件處於組件樹的哪一層。因爲 Vue 實例實現了一個事件分發接口，你能夠經過實例化一個空的 Vue 實例來實現這個目的。組件中能夠使用$emit,$on,$off分別來分發，監聽，取消監聽事件。可是對於複雜的狀況，更推薦使用一個專門的狀態管理層如：Vuex。

 

主要實現途徑是在相互通信的兄弟組件之中，都引入一個新的Vue實例，而後分別調用這個實例的事件觸發和監聽來實現通信和參數傳遞。

簡單的例子：

參考：https://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1
我這裏說個比較簡單的：

這裏，A.vue是父組件，B.vue，C.vue是兄弟組件。在B中click後，C將點擊的DOM打印出來。
給click添加事件：

     <div class="click" @click.stop.prevent="doClick($event)"></div>  

在公共方法common/js/bus.js裏面：

import Vue from 'vue'; export default new Vue();

這裏建立了一個新的Vue的實例，接下來在B和C組件裏面引入Bus；
而後在B裏面進行觸發事件：

methods：{ addCars(ev){ Bus.$emit('getTarget',event.target); } }

在C組件裏面的created（）鉤子中調用Bus監聽這個事件，並接受參數：

created(){ Bus.$on('getTarget',target=>{ console.log(target); }) }

 題外話：vuex是怎麼實現的？

參考：https://segmentfault.com/q/1010000007491994