Ⅰ. 什么是eventBus？

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

Ⅱ. vue3 如何使用 eventBus

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

步骤一 （eventBus 容器）

  • 在src目录，创建个bus文件夹，存放 自己写的 bus.js ；

  • 编写 bus.js => 在class 原型上绑定三个 （订阅，取消订阅，发布）函数；

    // bus.js
    class Bus {

    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]) {
        delete this.list[name];
    }
}

    }
    export default new Bus;

  • 订阅者（on），讲函数放入 list 中 => 等待发布者（emit），传参去调用；
  • 由于函数是对象，内存地址未发生变化，还在在订阅者（on）组件中执行。

步骤二 （ 订阅者 ）

  • 在 comA.vue 中订阅；

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

    <template>
    <div>

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

    </div>
    </template>
    <script>
    import {ref , onUnmounted} from 'vue';
    import Bus from '../bus/bus.js';
    export default {
    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 '../bus/bus.js';
    export default {
    setup() {

     function fabu(){
     Bus.$emit('addAge',{age:'19'});
 }

    }
    }
    </script>

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