全局組件通信
全局組件通信是指，兩個任意的組件，不管是否有關聯（e.g. 父子、爺孫）的組件，都可以直接進行交流的通信方案。
舉個例子，像下面這樣，B2.vue 可以采用全局通信方案，直接向 D2.vue 發起交流，而無需經過他們的父組件。
A.vue
├─B1.vue
├───C1.vue
├─────D1.vue
├─────D2.vue
├───C2.vue
├─────D3.vue
└─B2.vue
常用的方法有：
| 方案 | 發起方 | 接收方 | 對應章節傳送門 |
|---|---|---|---|
| EventBus | emit | on | 點擊查看 |
| Vuex | - | - | 點擊查看 |
#EventBus
EventBus 通常被稱之為 “全局事件總線” ，它是用來在全局范圍內通信的一個常用方案，它的特點就是： “簡單” 、 “靈活” 、“輕量級”。
TIP
在中小型項目，全局通信推薦優先采用該方案，事件總線在打包壓縮后不到 200 個字節， API 也非常簡單和靈活。
#回顧 2.x
在 2.x，使用 EventBus 無需導入第三方插件，直接在自己的 libs 文件夾下創建一個 bus.ts 文件，暴露一個新的 Vue 實例即可。
import Vue from 'vue';
export default new Vue;
然后就可以在組件里引入 bus ，通過 $emit 去發起交流，通過 $on 去監聽接收交流。
舊版方案的完整案例代碼可以查看官方的 2.x 語法 - 事件 API(opens new window)
#了解 3.x
Vue 3.x 移除了 $on 、 $off 和 $once 這幾個事件 API ，應用實例不再實現事件觸發接口。
根據官方文檔在 遷移策略 - 事件 API (opens new window)的推薦，我們可以用 mitt (opens new window)或者 tiny-emitter (opens new window)等第三方插件來實現 EventBus 。
#創建 3.x 的 EventBus
這里以 mitt 為例，示范如何創建一個 Vue 3.x 的 EventBus 。
首先，需要安裝 mitt ：
npm install --save mitt
然后在 libs 文件夾下，創建一個 bus.ts 文件，內容和舊版寫法其實是一樣的，只不過是把 Vue 實例，換成了 mitt 實例。
import mitt from 'mitt';
export default mitt();
然后就可以定義發起和接收的相關事件了，常用的 API 和參數如下：
| 方法名稱 | 作用 |
|---|---|
| on | 注冊一個監聽事件，用于接收數據 |
| emit | 調用方法發起數據傳遞 |
| off | 用來移除監聽事件 |
on 的參數：
| 參數 | 類型 | 作用 |
|---|---|---|
| type | string | symbol | 方法名 |
| handler | function | 接收到數據之后要做什么處理的回調函數 |
這里的 handler 建議使用具名函數，因為匿名函數無法銷毀。
emit 的參數：
| 參數 | 類型 | 作用 |
|---|---|---|
| type | string | symbol | 與 on 對應的方法名 |
| data | any | 與 on 對應的，允許接收的數據 |
off 的參數：
| 參數 | 類型 | 作用 |
|---|---|---|
| type | string | symbol | 與 on 對應的方法名 |
| handler | function | 要刪除的，與 on 對應的 handler 函數名 |
更多的 API 可以查閱 插件的官方文檔 (opens new window)，在了解了最基本的用法之后，我們來開始配置一對交流。
TIP
如果你需要把 bus 配置為全局 API ，不想在每個組件里分別 import 的話，可以參考之前的章節內容： 全局 API 掛載 。
#創建和移除監聽事件
在需要暴露交流事件的組件里，通過 on 配置好接收方法，同時為了避免路由切換過程中造成事件多次被綁定，多次觸發，需要在適當的時機 off 掉：
import { defineComponent, onBeforeUnmount } from 'vue'
import bus from '@libs/bus'
export default defineComponent({
setup () {
// 定義一個打招呼的方法
const sayHi = (msg: string = 'Hello World!'): void => {
console.log(msg);
}
// 啟用監聽
bus.on('sayHi', sayHi);
// 在組件卸載之前移除監聽
onBeforeUnmount( () => {
bus.off('sayHi', sayHi);
})
}
})
btw: 關于銷毀的時機，可以參考 組件的生命周期 。
#調用監聽事件
在需要調用交流事件的組件里，通過 emit 進行調用：
import { defineComponent } from 'vue'
import bus from '@libs/bus'
export default defineComponent({
setup () {
// 調用打招呼事件，傳入消息內容
bus.emit('sayHi', '哈哈哈哈哈哈哈哈哈哈哈哈哈哈');
}
})
#舊項目升級 EventBus
在 Vue 3.x 的 EventBus，我們可以看到它的 API 和舊版是非常接近的，只是去掉了 $ 符號。
如果你要對舊的項目進行升級改造，因為原來都是使用了 $on 、 $emit 等舊的 API ，一個一個組件去修改成新的 API 肯定不現實。
我們可以在創建 bus.ts 的時候，通過自定義一個 bus 對象，來掛載 mitt 的 API 。
在 bus.ts 里，改成以下代碼：
import mitt from 'mitt';
// 初始化一個 mitt 實例
const emitter = mitt();
// 定義一個空對象用來承載我們的自定義方法
const bus: any = {};
// 把你要用到的方法添加到 bus 對象上
bus.$on = emitter.on;
bus.$emit = emitter.emit;
// 最終是暴露自己定義的 bus
export default bus;
這樣我們在組件里就可以繼續使用 bus.$on 、bus.$emit 等以前的老 API 了，不影響我們舊項目的升級使用。
點贊加關注，永遠不迷路
