全局組件通信

全局組件通信是指，兩個任意的組件，不管是否有關聯（e.g. 父子、爺孫）的組件，都可以直接進行交流的通信方案。

舉個例子，像下面這樣，B2.vue 可以采用全局通信方案，直接向 D2.vue 發起交流，而無需經過他們的父組件。

A.vue
├─B1.vue
├───C1.vue
├─────D1.vue
├─────D2.vue
├───C2.vue
├─────D3.vue
└─B2.vue

常用的方法有：

#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 的參數：

這里的 handler 建議使用具名函數，因為匿名函數無法銷毀。

emit 的參數：

off 的參數：

更多的 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 了，不影響我們舊項目的升級使用。

點贊加關注，永遠不迷路