Vue 2.0學習筆記：事件匯流排（EventBus）

摘要： 許多現代JavaScript框架和庫的核心概念是能夠將資料和UI封裝在模組化、可重用的元件中。這對於開發人員可以在開發整個應用程式時避免使用編寫大量重複的程式碼。雖然這樣做非常有用，但也涉及到元件之間的資料通訊。在Vue中同樣有這樣的概念存在。通過前面一段時間的學習，Vue元件資料通訊常常會有...

許多現代JavaScript框架和庫的核心概念是能夠將資料和UI封裝在模組化、可重用的元件中。這對於開發人員可以在開發整個應用程式時避免使用編寫大量重複的程式碼。雖然這樣做非常有用，但也涉及到元件之間的資料通訊。在Vue中同樣有這樣的概念存在。通過前面一段時間的學習，Vue元件資料通訊常常會有父子元件，兄弟元件之間的資料通訊。也就是說在Vue中元件通訊有一定的原則。

父子元件通訊原則

為了提高元件的獨立性與重用性，父元件會通過 props 向下傳資料給子元件，當子元件有事情要告訴父元件時會通過 $emit 事件告訴父元件。如此確保每個元件都是獨立在相對隔離的環境中執行，可以大幅提高元件的維護性。

在《Vue元件通訊》一文中有詳細介紹過這部分。但這套通訊原則對於兄弟元件之間的資料通訊就有一定的詬病。當然，在Vue中有其他的方式來處理兄弟元件之間的資料通訊，比如Vuex這樣的庫。但在很多情況之下，咱們的應用程式不需要類似Vuex這樣的庫來處理元件之間的資料通訊，而可以考慮Vue中的 事件匯流排 ，即 EventBus 。

接下來的內容，就是來一起學習Vue中的 EventBus 相關的知識點。

EventBus的簡介

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

如何使用EventBus

在Vue的專案中怎麼使用 EventBus 來實現元件之間的資料通訊呢？具體可以通過下面幾個步驟來完成。

初始化

首先你需要做的是建立事件匯流排並將其匯出，以便其它模組可以使用或者監聽它。我們可以通過兩種方式來處理。先來看第一種，新建立一個 .js 檔案，比如 event-bus.js ：

// event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

你需要做的只是引入 Vue 並匯出它的一個例項（在這種情況下，我稱它為 EventBus ）。實質上它是一個不具備 DOM 的元件，它具有的僅僅只是它例項方法而已，因此它非常的輕便。

另外一種方式，可以直接在專案中的 main.js 初始化 EventBus ：

// main.js
Vue.prototype.$EventBus = new Vue()

注意，這種方式初始化的 EventBus 是一個 全域性的事件匯流排 。稍後我們會花點時間專門聊一聊全域性的事件匯流排。

現在我們已經建立了 EventBus ，接下來你需要做到的就是在你的元件中載入它，並且呼叫同一個方法，就如你在父子元件中互相傳遞訊息一樣。

傳送事件

假設你有兩個子元件： DecreaseCount 和 IncrementCount ，分別在按鈕中綁定了 decrease() 和 increment() 方法。這兩個方法做的事情很簡單，就是數值遞減（增） 1 ，以及角度值遞減（增） 180 。在這兩個方法中，通過 EventBus.$emit(channel: string, callback(payload1,…)) 監聽 decreased （和 incremented ）頻道。

<!-- DecreaseCount.vue -->
<template>
<button @click="decrease()">-</button>
</template>

<script>
import { EventBus } from "../event-bus.js";
export default {
name: "DecreaseCount",
data() {
return {
num: 1,
deg:180
};
},
methods: {
decrease() {
EventBus.$emit("decreased", {
num:this.num,
deg:this.deg
});
}
}
};
</script>

<!-- IncrementCount.vue -->
<template>
<button @click="increment()">+</button>
</template>

<script>
import { EventBus } from "../event-bus.js";
export default {
name: "IncrementCount",
data() {
return {
num: 1,
deg:180
};
},
methods: {
increment() {
EventBus.$emit("incremented", {
num:this.num,
deg:this.deg
});
}
}
};
</script>

上面的示例，在 DecreaseCount 和 IncrementCount 分別傳送出了 decreased 和 incremented 頻道。接下來，我們需要在另一個元件中接收這兩個事件，保持資料在各元件之間的通訊。

接收事件

現在我們可以在元件 App.vue 中使用 EventBus.$on(channel: string, callback(payload1,…)) 監聽 DecreaseCount 和 IncrementCount 分別傳送出了 decreased 和 incremented 頻道。

<!-- App.vue -->
<template>
<div id="app">
<div class="container" :style="{transform: 'rotateY(' + degValue + 'deg)'}">
<div class="front">
<div class="increment">
<IncrementCount />
</div>
<div class="show-front">
{{fontCount}}
</div>
<div class="decrement">
<DecreaseCount />
</div>
</div>

<div class="back">
<div class="increment">
<IncrementCount />
</div>
<div class="show-back">
{{backCount}}
</div>
<div class="decrement">
<DecreaseCount />
</div>
</div> 
</div>
</div>
</template>

<script>
import IncrementCount from "./components/IncrementCount";
import DecreaseCount from "./components/DecreaseCount";
import { EventBus } from "./event-bus.js";
export default {
name: "App",
components: {
IncrementCount,
DecreaseCount
},
data() {
return {
degValue:0,
fontCount:0,
backCount:0
};
},
mounted() {
EventBus.$on("incremented", ({num,deg}) => {
this.fontCount += num
this.$nextTick(()=>{
this.backCount += num
this.degValue += deg;
})
});
EventBus.$on("decreased", ({num,deg}) => {
this.fontCount -= num
this.$nextTick(()=>{
this.backCount -= num
this.degValue -= deg;
})
});
}
};
</script>

最終得到的效果如下：

最後用一張圖來描述示例中用到的 EventBus 之間的關係：

如果你只想監聽一次事件的發生，可以使用 EventBus.$once(channel: string, callback(payload1,…)) 。

移除事件監聽者

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

import { eventBus } from './event-bus.js'
EventBus.$off('decreased', {})

你也可以使用 EventBus.$off(‘decreased’) 來移除應用內所有對此事件的監聽。或者直接呼叫 EventBus.$off() 來移除所有事件頻道， 注意不需要新增任何引數 。

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

全域性EventBus

全域性EventBus，雖然在某些示例中不提倡使用，但它是一種非常漂亮且簡單的方法，可以跨元件之間共享資料。

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

這整個方法可以看作是一種設計模式，因為如果你檢視它周圍的東西，你會發現它更像是一種體系結構解決方案。我們將使用普通的JavaScript，並建立兩個元件，並演示EventBus的工作方式。

讓我們看看下圖，並試著瞭解在這種情況下究竟發生了什麼。

我們從上圖中可以得出以下幾點：

• 有一個全域性EventBus
• 所有事件都訂閱它
• 所有元件也釋出到它，訂閱元件獲得更新
• 總結一下。所有元件都能夠將事件釋出到匯流排，然後匯流排由另一個元件訂閱，然後訂閱它的元件將得到更新

在程式碼中，我們將保持它非常小巧和簡潔。我們將它分為兩部分，將展示兩個元件以及生成事件匯流排的程式碼。

建立全域性EventBus

全域性事件匯流排只不過是一個簡單的 vue 元件。程式碼如下：

var EventBus = new Vue();

Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})

現在，這個特定的匯流排使用兩個方法 $on 和 $emit 。一個用於建立發出的事件，它就是 $emit ；另一個用於訂閱 $on ：

var EventBus = new Vue();

this.$bus.$emit('nameOfEvent',{ ... pass some event data ...});

this.$bus.$on('nameOfEvent',($event) => {
// ...
})

現在，我們建立兩個簡單的元件，以便最終得出結論。

接下來的這個示例中，我們建立了一個 ShowMessage 的元件用來顯示資訊，另外建立一個 UpdateMessage 的元件，用來更新資訊。

在 UpdateMessage 元件中觸發需要的事件。在這個示例中，將觸發一個 updateMessage 事件，這個事件傳送了 updateMessage 的頻道：

<!-- UpdateMessage.vue -->
<template>
<div class="form">
<div class="form-control">
<input v-model="message" >
<button @click="updateMessage()">更新訊息</button>
</div>
</div>
</template>
<script>
export default {
name: "UpdateMessage",
data() {
return {
message: "這是一條訊息"
};
},
methods: {
updateMessage() {
this.$bus.$emit("updateMessage", this.message);
}
},
beforeDestroy () {
$this.$bus.$off('updateMessage')
}
};
</script>

同時在 ShowMessage 元件中監聽該事件：

<!-- ShowMessage.vue -->
<template>
<div class="message">
<h1>{{ message }}</h1>
</div>
</template>

<script>
export default {
name: "ShowMessage",
data() {
return {
message: "我是一條訊息"
};
},
created() {
var self = this
this.$bus.$on('updateMessage', function(value) {
self.updateMessage(value);
})
},
methods: {
updateMessage(value) {
this.message = value
}
}
};
</script>

最終的效果如下：

從上面的程式碼中，我們可以看到 ShowMessage 元件偵聽一個名為 updateMessage 的特定事件，這個事件在元件例項化時被觸發，或者你可以在建立元件時觸發。另一方面，我們有另一個元件 UpdateMessage ，它有一個按鈕，當有人點選它時會發出一個事件。這導致訂閱元件偵聽發出的事件。這產生了 Pub/Sub 模型，該模型在兄弟姐妹之間持續存在並且非常容易實現。

總結

本文主要通過兩個例項學習了Vue中有關於 EventBus 相關的知識點。主要涉及了 EventBus 如何例項化，又是怎麼通過 $emit 傳送頻道訊號，又是如何通過 $on 來接收頻道訊號。最後簡單介紹了怎麼建立全域性的 EventBus 。從例項中我們可以瞭解到， EventBus 可以較好的實現兄弟元件之間的資料通訊。