[Vue] EventBus 事件總線

vue 元件溝通

vue 元件父子元件間的溝通通常透過 props 及 $emit。而當今天兩頁面間沒有任何引入關係時，該如何溝通呢？

假設不依賴 Vuex 來處來元件間的溝通，就可以考慮 Vue 的事件總線EventBus

EventBus 事件總線

在Vue中可以使用 EventBus 來作為溝通橋樑的概念，就像是所有元件共用相同的事件中心，可以向該中心註冊發送事件或接收事件，所以元件都可以上下平行通知其他元件。

建立

首先需創建事件總線並將其導出，以便其他元件可以使用或監聽。

現在我們已經建立了 EventBus ，接下來就是在元件中加載他，並呼叫同一個事件，就像父子元件相互傳遞一樣。

發送事件

接著就可以在元件利用 $bus 取得事件中樞，再透過此 eventbus 呼叫 emit 送出事件及傳遞的資料。

接收事件

在任何一個存在的元件中設置監聽事件後，都可以接收到訊息。

一定要記得在元件銷毀前，清除所監聽的所有事件！

結論

操作下來 EventBus 很方便，但使用上還是要把握以下原則

1. 單純使用在多階層或同層元件溝通。
2. 事件名稱統一命名，避免衝突產生。
3. 在元件銷毀前，清除所監聽的所有事件。
4. 適合少的數據量，多的建議使用 Vuex。

參考資料

1. Use a Global Event Bus
2. [Vue] 跟著 Vue 闖蕩前端世界 — 07 組件溝通 event bus | 搞搞就懂 — 點部落