Vue3全局組件通信之EventBus

全局組件通信

全局組件通信是指橡庞,兩個任意的組件,不管是否有關聯(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 了,不影響我們舊項目的升級使用煤痕。

點贊加關注梧宫,永遠不迷路

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市摆碉,隨后出現(xiàn)的幾起案子塘匣,更是在濱河造成了極大的恐慌,老刑警劉巖巷帝,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件忌卤,死亡現(xiàn)場離奇詭異,居然都是意外死亡楞泼,警方通過查閱死者的電腦和手機驰徊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來堕阔,“玉大人辣垒,你說我怎么就攤上這事∮∈撸” “怎么了?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵例驹,是天一觀的道長退唠。 經(jīng)常有香客問我,道長瞧预,這世上最難降的妖魔是什么仅政? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任圆丹,我火速辦了婚禮辫封,結果婚禮上,老公的妹妹穿的比我還像新娘倦微。我一直安慰自己正压,他們只是感情好,可當我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布劣欢。 她就那樣靜靜地躺著裁良,像睡著了一般。 火紅的嫁衣襯著肌膚如雪牧抵。 梳的紋絲不亂的頭發(fā)上侨把,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天,我揣著相機與錄音获枝,去河邊找鬼骇笔。 笑死,一個胖子當著我的面吹牛懦傍,可吹牛的內容都是我干的。 我是一名探鬼主播粗俱,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼寸认,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了偏塞?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤烛愧,失蹤者是張志新(化名)和其女友劉穎掂碱,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沧卢,經(jīng)...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡醉者,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年撬即,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片剥槐。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡粒竖,死狀恐怖,靈堂內的尸體忽然破棺而出蕊苗,到底是詐尸還是另有隱情,我是刑警寧澤尖滚,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布瞧柔,位于F島的核電站,受9級特大地震影響置逻,放射性物質發(fā)生泄漏备绽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一宇驾、第九天 我趴在偏房一處隱蔽的房頂上張望猴伶。 院中可真熱鬧,春花似錦他挎、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至摧阅,卻和暖如春绷蹲,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背瘸右。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工太颤, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人龄章。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓做裙,卻偏偏與公主長得像,于是被迫代替她去往敵國和親锚贱。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2 345

推薦閱讀更多精彩內容