「後端小夥伴來學前端了」Vue中利用全域性事件匯流排實現元件之間通訊

---

highlight: a11y-dark theme: v-green

---

這是我參與11月更文挑戰的第16天，活動詳情檢視：2021最後一次更文挑戰

月亮啊月亮

你能照見南邊，也能照見北邊

照見她，你跟她說一聲，就說我想她了。

前言

前一篇文章寫了 vue 中利用 Props 實現元件之間的通訊，那種方式是最簡單也是最基礎的元件之間的通訊方式。父元件通過 props 向下傳資料給子元件，當子元件有事情告訴父元件時會通過$emit事件告訴父元件。對於父子元件，這種傳遞方式，是較為方便且實用的，但是對於祖孫元件或者兄弟元件，就顯得不那麼友善了。

---

在Vue本身的生態中，也有一個獨立的Vuex庫用來處理元件之間的通訊，但很多時候，咱們並不需要動用類似Vuex這種大殺招，而可以考慮更簡單的 Vue 中的事件匯流排，即EventBus。

在這提出一個簡單的思考:

一旦當你看到專案中,某段程式碼或者是要點很多下才能出來的變數,再或者獲取到的方式都相同,這個時候你就一定要考慮能不能讓程式碼達到複用,咱們要學會偷懶哈,偷懶才能前進的更快哈.

下面開始今天的正文哈...

一、什麼叫全域性事件匯流排

1.1、概念的引入

我們先認清一件事情，所謂的元件之間的互動，就是我們將資料能夠做到元件之間能夠共享資料。

無論是props、EventBus、Vuex、釋出訂閱等實現元件互動，本質就是做到資料共享。弄清這一點，對於使用全域性事件匯流排，就簡單多了哈。不過今天的文章，主要是先帶著大家使用，原理等週末拉。

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

1.2、安裝全域性事件匯流排

javascript //想要成為事件匯流排的條件： //1、所有的元件物件必須都能看得到這個匯流排物件，因此我們把這個物件放在了Vue原型 //2、這個事件匯流排物件必須能呼叫$on和$emit方法（匯流排物件必須是Vue的例項化物件或者是元件物件）

確定全域性事件匯流排: 將vm物件作為事件匯流排掛載到vue的原型物件上

```javascript import Vue from 'vue' import App from './App.vue'

Vue.config.productionTip = false // 關於全域性匯流排的使用說明 // 使用全域性匯流排的時候，更好的應用是在兄弟元件、祖孫元件之間，這些元件他們並不能做到直接通訊，這個使用全域性事件匯流排會方便很多 new Vue({ render: h => h(App), // beforeCreate 位於資料掛載之前的生命週期函式 beforeCreate () { // 安裝全域性事件匯流排 Vue.prototype.$bus = this } }).$mount('#app')

```

1.3、基本使用

小案例：

在App元件內引入一個demo元件，demo元件中有一個按鈕，點選可以修改app元件傳給子元件的值，並更新檢視。

App元件

```vue

```

demo元件

```vue

```

二、全域性事件匯流排和Props實現元件通訊的區別

個人使用總結的哈：

props用來實現元件之間通訊，更多的方便於父子元件通訊。如果是祖孫或者兄弟元件，將會多一層中間層，而且沒有任何用處，而且給人的感覺比較繁瑣。

全域性事件匯流排的話，將它掛在vm原型上，對於祖孫元件、或者兄弟元件之間通訊，非常的方便，不需要中間層，非常的方便。

後語

大家一起加油！！！如若文章中有不足之處，請大家及時指出，在此鄭重感謝。

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上程式設計這條道路的小青年。

希望：我們，待別日相見時，都已有所成。