全局組件通信
全局組件通信是指橡庞,兩個任意的組件,不管是否有關聯(lián)(e.g. 父子留晚、爺孫)的組件酵紫,都可以直接進行交流的通信方案。
舉個例子错维,像下面這樣奖地,B2.vue
可以采用全局通信方案,直接向 D2.vue
發(fā)起交流赋焕,而無需經(jīng)過他們的父組件鹉动。
A.vue
├─B1.vue
├───C1.vue
├─────D1.vue
├─────D2.vue
├───C2.vue
├─────D3.vue
└─B2.vue
常用的方法有:
方案 | 發(fā)起方 | 接收方 | 對應章節(jié)傳送門 |
---|---|---|---|
EventBus | emit | on | 點擊查看 |
Vuex | - | - | 點擊查看 |
#EventBus
EventBus
通常被稱之為 “全局事件總線” ,它是用來在全局范圍內通信的一個常用方案宏邮,它的特點就是: “簡單” 泽示、 “靈活” 、“輕量級”蜜氨。
TIP
在中小型項目械筛,全局通信推薦優(yōu)先采用該方案,事件總線在打包壓縮后不到 200 個字節(jié)飒炎, API 也非常簡單和靈活埋哟。
#回顧 2.x
在 2.x,使用 EventBus 無需導入第三方插件郎汪,直接在自己的 libs
文件夾下創(chuàng)建一個 bus.ts
文件赤赊,暴露一個新的 Vue 實例即可。
import Vue from 'vue';
export default new Vue;
然后就可以在組件里引入 bus 煞赢,通過 $emit
去發(fā)起交流抛计,通過 $on
去監(jiān)聽接收交流。
舊版方案的完整案例代碼可以查看官方的 2.x 語法 - 事件 API(opens new window)
#了解 3.x
Vue 3.x 移除了 $on
照筑、 $off
和 $once
這幾個事件 API 瘦陈,應用實例不再實現(xiàn)事件觸發(fā)接口。
根據(jù)官方文檔在 遷移策略 - 事件 API (opens new window)的推薦晨逝,我們可以用 mitt (opens new window)或者 tiny-emitter (opens new window)等第三方插件來實現(xiàn) EventBus
。
#創(chuàng)建 3.x 的 EventBus
這里以 mitt
為例懦铺,示范如何創(chuàng)建一個 Vue 3.x 的 EventBus
。
首先冬念,需要安裝 mitt
:
npm install --save mitt
然后在 libs
文件夾下,創(chuàng)建一個 bus.ts
文件刘急,內容和舊版寫法其實是一樣的,只不過是把 Vue 實例叔汁,換成了 mitt 實例统求。
import mitt from 'mitt';
export default mitt();
然后就可以定義發(fā)起和接收的相關事件了码邻,常用的 API 和參數(shù)如下:
方法名稱 | 作用 |
---|---|
on | 注冊一個監(jiān)聽事件,用于接收數(shù)據(jù) |
emit | 調用方法發(fā)起數(shù)據(jù)傳遞 |
off | 用來移除監(jiān)聽事件 |
on
的參數(shù):
參數(shù) | 類型 | 作用 |
---|---|---|
type | string | symbol | 方法名 |
handler | function | 接收到數(shù)據(jù)之后要做什么處理的回調函數(shù) |
這里的 handler
建議使用具名函數(shù)像屋,因為匿名函數(shù)無法銷毀。
emit
的參數(shù):
參數(shù) | 類型 | 作用 |
---|---|---|
type | string | symbol | 與 on 對應的方法名 |
data | any | 與 on 對應的己莺,允許接收的數(shù)據(jù) |
off
的參數(shù):
參數(shù) | 類型 | 作用 |
---|---|---|
type | string | symbol | 與 on 對應的方法名 |
handler | function | 要刪除的,與 on 對應的 handler 函數(shù)名 |
更多的 API 可以查閱 插件的官方文檔 (opens new window)戈轿,在了解了最基本的用法之后凌受,我們來開始配置一對交流。
TIP
如果你需要把 bus
配置為全局 API 思杯,不想在每個組件里分別 import 的話胜蛉,可以參考之前的章節(jié)內容: 全局 API 掛載 。
#創(chuàng)建和移除監(jiān)聽事件
在需要暴露交流事件的組件里色乾,通過 on
配置好接收方法誊册,同時為了避免路由切換過程中造成事件多次被綁定,多次觸發(fā)暖璧,需要在適當?shù)臅r機 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);
}
// 啟用監(jiān)聽
bus.on('sayHi', sayHi);
// 在組件卸載之前移除監(jiān)聽
onBeforeUnmount( () => {
bus.off('sayHi', sayHi);
})
}
})
btw: 關于銷毀的時機案怯,可以參考 組件的生命周期 。
#調用監(jiān)聽事件
在需要調用交流事件的組件里漆撞,通過 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 肯定不現(xiàn)實。
我們可以在創(chuàng)建 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;
這樣我們在組件里就可以繼續(xù)使用 bus.$on
术陶、bus.$emit
等以前的老 API 了,不影響我們舊項目的升級使用煤痕。
點贊加關注梧宫,永遠不迷路