如何在vue3+ts项目中使用evenBus

第一步：创建一个名字为Bus的ts文件 内容：

// 先定义一个类型，emit作为发布(传递)，on作为订阅(接收)
// name是事件名称，callback是一个回调函数
type BusClass = {
  emit:(name:string) => void
  on:(name:string, callback:Function) => void
}
// 定义多种参数类型
type PramsKey = string | number | symbol
// 定义一个调用中心,可以接收多个参数
type List = {
 [key:PramsKey]: Array<Function>
}
class Bus implements BusClass {
  list: List
  constructor (){
      // 初始化list
      this.list = {}   
  }
  // 发布事件,...args解构多个参数
  emit (name:string,...args:Array<any>){
      // 获取到list里的数据
      let eventName:Array<Function> = this.list[name]
      if (eventName) {
        eventName.forEach(fn =>{
          fn.apply(this, args)
        })
      }
  }
  // 接收事件
  on (name:string, callback:Function){
      // 如果是第一次注册，则为空；如果被多次注册，则采用之前注册的名字
      let fn:Array<Function> = this.list[name] || []
      fn.push(callback)
      this.list[name] = fn
  }
}
// 导出bus
export default new Bus()

第二步：在想要通信的两个子组件中引用：

import Bus from '../Bus'

A组件的变动想要通知B组件就可以使用

Bus.emit('containerTypeChange', val)

B组件接收方法

Bus.on('containerTypeChange', val => {
   console.log(val)
})