[Vue] EventBus 事件總線
2 min readJul 10, 2020
vue 元件溝通
vue 元件父子元件間的溝通通常透過 props 及 $emit。而當今天兩頁面間沒有任何引入關係時,該如何溝通呢?
假設不依賴 Vuex 來處來元件間的溝通,就可以考慮 Vue 的事件總線EventBus
EventBus 事件總線
在Vue中可以使用 EventBus 來作為溝通橋樑的概念,就像是所有元件共用相同的事件中心,可以向該中心註冊發送事件或接收事件,所以元件都可以上下平行通知其他元件。
建立
首先需創建事件總線並將其導出,以便其他元件可以使用或監聽。
現在我們已經建立了 EventBus ,接下來就是在元件中加載他,並呼叫同一個事件,就像父子元件相互傳遞一樣。
發送事件
接著就可以在元件利用 $bus 取得事件中樞,再透過此 eventbus 呼叫 emit 送出事件及傳遞的資料。
接收事件
在任何一個存在的元件中設置監聽事件後,都可以接收到訊息。
一定要記得在元件銷毀前,清除所監聽的所有事件!
結論
操作下來 EventBus 很方便,但使用上還是要把握以下原則
- 單純使用在多階層或同層元件溝通。
- 事件名稱統一命名,避免衝突產生。
- 在元件銷毀前,清除所監聽的所有事件。
- 適合少的數據量,多的建議使用 Vuex。