vue3中Bus的实现

• eventBus

vue3中没有了eventBus，那么我们就自己造个"轮子"吧!

EventBus原理

1. $on('name', fn)订阅消息，name:订阅的消息名称， fn: 订阅的消息
2. $emit('name', args)发布消息, name:发布的消息名称 ， args：发布的消息

• 实现

1. 创建Bus.js文件

// 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();

2. 订阅消息-$on 在app.vue文件中订阅,

import Bus from "./util/Bus"

  setup() {
    let name = ref('zhangsan')
    Bus.$on("changeName", (msg) => {
      name.value = msg
    })

    return { name }
    
    //组件卸载时，取消订阅，避免内存爆表!!!
    onUnmounted( () => { Bus.$off('addAge') } )
  }

3. 发布消息-$emit

在HelloWorld.vue中发布

import Bus from "./util/Bus"

  setup() {
    // console.log(this.msg);
    function change() {
      Bus.$emit('changeName', '你好，世界！')
    }

    return { change }
  }

• 搞定收工

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