vue3如何使用eventBus訂閱發(fā)布模式

第vue3如何使用eventBus訂閱發(fā)布模式目錄Ⅰ.什么是eventBus？Ⅱ.vue3如何使用步驟一（eventBus容器）步驟二（訂閱者）步驟三（發(fā)布者）總結(jié)

Ⅰ.什么是eventBus？

通俗的講，就是在任意一個組件，想把消息（參數(shù)）-傳遞到任意一個組件，并執(zhí)行一定邏輯。

Ⅱ.vue3如何使用

eventBusvue3中沒有了，eventBus，所以我們要自己寫，但是非常簡單。

步驟一（eventBus容器）

在src目錄，創(chuàng)建個bus文件夾，存放自己寫的bus.js；

編寫bus.js=在class原型上綁定三個（訂閱，取消訂閱，發(fā)布）函數(shù)；

//bus.js

classBus{

constructor(){

this.list={};//收集訂閱

//訂閱

$on(name,fn){

this.list[name]=this.list[name]||[];

this.list[name].push(fn);

//發(fā)布

$emit(name,data){

if(this.list[name]){

this.list[name].forEach((fn)={fn(data);});

//取消訂閱

$off(name){

if(this.list[name]){

deletethis.list[name];

exportdefaultnewBus;

訂閱者（on），講函數(shù)放入list中=等待發(fā)布者（emit），傳參去調(diào)用；

由于函數(shù)是對象，內(nèi)存地址未發(fā)生變化，還在在訂閱者（on）組件中執(zhí)行。

步驟二（訂閱者）

在comA.vue中訂閱；

訂閱只是存放函數(shù)，并未執(zhí)行，等發(fā)布后才會執(zhí)行；

template

div

{{name}}---{{age}}

/div

/template

script

import{ref,onUnmounted}from'vue';

importBusfrom'../bus/bus.js';

exportdefault{

setup(){

constname='張三';

constage=ref(18)

Bus.$on('addAge',({num})={age.value=num;})

//組件卸載時，取消訂閱

onUnmounted(()={Bus.$off('addAge')})

/script

在離開組件（onUnmounted）時，將注冊進去的，訂閱函數(shù)的數(shù)組刪除，避免存放越來越多。

步驟三（發(fā)布者）

在comB.vue中發(fā)布；

調(diào)用訂閱并傳參；

template

button@click="fabu"發(fā)布/button

/template

script

importBusfrom'../eventBus/Bus.js'

exportdefault{

setup(){

functionfabu(){

Bus.$emit('addAg