你不可不知的前端進階知識:Vue事件總線(EventBus)使用詳細介紹

vue組件非常常見的有父子組件通信，兄弟組件通信。而父子組件通信就很簡單，父組件會通過props向下傳數據給子組件，當子組件有事情要告訴父組件時會通過 $emit事件告訴父組件。今天就來說說如果兩個頁面沒有任何引入和被引入關係，該如何通信了？

如果咱們的應用程式不需要類似Vuex這樣的庫來處理組件之間的數據通信，就可以考慮Vue中的 事件總線 ，即 **EventBus**來通信。

EventBus 又稱為事件總線。在Vue中可以使用EventBus 來作為溝通橋梁的概念，就像是所有組件共用相同的事件中心，可以向該中心註冊發送事件或接收事件，所以組件都可以上下平行地通知其他組件，但也就是太方便所以若使用不慎，就會造成難以維護的「災難」，因此才需要更完善的Vuex作為狀態管理中心，將通知的概念上升到共享狀態層次。

首先需要創建事件總線並將其導出，以便其它模塊可以使用或者監聽它。我們可以通過兩種方式來處理。先來看第一種，新創建一個 .js 文件，比如 event-bus.js

實質上EventBus是一個不具備DOM的組件，它具有的僅僅只是它實例方法而已，因此它非常的輕便。

另外一種方式，可以直接在項目中的main.js初始化EventBus:

注意，這種方式初始化的 EventBus 是一個 全局的事件總線 。稍後再來聊一聊全局的事件總線。

現在我們已經創建了 EventBus ，接下來你需要做到的就是在你的組件中加載它，並且調用同一個方法，就如你在父子組件中互相傳遞消息一樣。

假設你有兩個Vue頁面需要通信： A 和 B ，A頁面 在按鈕上面綁定了點擊事件，發送一則消息，想=通知 B頁面。

接下來，我們需要在 B頁面 中接收這則消息。

同理我們也可以在 B頁面 向 A頁面 發送消息。這裡主要用到的兩個方法：

前面提到過，如果使用不善，EventBus 會是一種災難，到底是什麼樣的「災難」了？大家都知道vue是單頁應用，如果你在某一個頁面刷新了之後，與之相關的EventBus會被移除，這樣就導致業務走不下去。

還要就是如果業務有反覆操作的頁面，EventBus 在監聽的時候就會觸發很多次，也是一個非常大的隱患。這時候我們就需要好好處理 EventBus 在項目中的關係。通常會用到，在vue頁面銷毀時，同時移除EventBus 事件監聽。

如果想移除事件的監聽，可以像下面這樣操作：

你也可以使用EventBus.$off('aMsg')來移除應用內所有對此某個事件的監聽。或者直接調用 EventBus.$off() 來移除所有事件頻道，不需要添加任何參數 。

上面就是 EventBus 的使用方法，是不是很簡單。上面的示例中我們也看到了，每次使用 EventBus 時都需要在各組件中引入 event-bus.js 。事實上，我們還可以通過別的方式，讓事情變得簡單一些。那就是創建一個全局的 EventBus 。接下來的示例向大家演示如何在Vue項目中創建一個全局的 EventBus。

它的工作原理是發布/訂閱方法，通常稱為 Pub/Sub 。

在這個特定的總線中使用兩個方法 $on 和$emit。一個用於創建發出的事件，它就是 $emit；另一個用於訂閱 $on ：

然後我們可以在某個Vue頁面使用 this.$bus.$emit("sendMsg", '我是web秀');，另一個Vue頁面使用

同時也可以使用this.$bus.$off('sendMsg')來移除事件監聽。

本文主要通過簡單的實例學習了Vue中有關於EventBus相關的知識點。主要涉及了EventBus如何實例化，又是如何通過 $emit 發送頻道信號，又是如何通過 $on 來接收頻道信號。最後簡單介紹了如何創建全局的 EventBus 。從實例中我們可以了解到，EventBus 可以較好的實現兄弟組件之間的數據通訊。

阿里P8級前端大牛袁鑫的vue-router直播課的錄播視頻免費放送啦，從中你將掌握vue-router核心內容和實現原理、獲得手寫一個router的能力。需要的小夥伴可以在公眾號對話框回復關鍵字「錄播」即可領取喲~

關注公眾號「前端知道」，分享web全棧相關的熱點知識、熱點文章，讓每個人都能由熟練工成長為專家。

*戳左下角閱讀原文可查看文章來源