vue3 eventBus订阅发布模式

Ⅰ. 什么是eventBus？

通俗的讲，就是在任意一个组件，想把消息（参数） -> 传递到任意一个组件 ，并执行一定逻辑。

Ⅱ. vue3 如何使用 eventBus

• vue3中没有了，eventBus，所以我们要自己写，但是非常简单。

步骤一 （eventBus 容器）

• 在src目录，创建个bus文件夹，存放 自己写的 bus.js ；
• 编写 bus.js => 在class 原型上绑定三个 （订阅，取消订阅，发布）函数；

// bus.jsclassBus{constructor(){this.list ={};// 收集订阅}// 订阅$on(name, fn){this.list[name]=this.list[name]||[];this.list[name].push(fn);}// 发布$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），讲函数放入 list 中 => 等待发布者（emit），传参去调用；
• 由于函数是对象，内存地址未发生变化，还在在订阅者（on）组件中执行。

步骤二 （ 订阅者 ）

• 在 comA.vue 中订阅；
• 订阅只是 存放函数，并未执行，等发布后才会执行；

<template><div>
     {{ name }} --- {{ age }}
  </div></template><script>import{ref , onUnmounted}from'vue';import Bus from'../bus/bus.js';exportdefault{setup(){const name ='张三';const age =ref(18)
       Bus.$on('addAge',({ num })=>{    age.value = num;})//组件卸载时，取消订阅onUnmounted(()=>{ Bus.$off('addAge')})}}</script>

• 在离开组件（onUnmounted）时 ，将注册进去的 ，订阅函数的数组删除，避免存放越来越多。

步骤三 （ 发布者 ）

• 在 comB.vue 中发布；
• 调用订阅 并传参；

<template><button@click="fabu">发布</button></template><script>import Bus from'../eventBus/Bus.js'exportdefault{setup(){functionfabu(){
         Bus.$emit('addAge',{age:'19'});}}}</script>

• 发布后，在订阅者的组件就会执行，注意对应的 订阅和发布的name 要相同。