全局 事件总线 mitt vue3 非兄弟组件间通信

全局 事件总线

provide inject 只能用在 嵌套关系中 后代组件(兄弟之间不可)

mitt 任意组件都可

重点!!!

A emitter.emit 必须要在 onMounted 或者 事件 或者定时器 等 异步操作中

B emitter.on 避免重复 必须要在 onUnmounted emitter.off

安装

npm i mitt

utils/mitt.js 中

// 这里我们在js中暴露这个事件总线对象

import mitt from 'mitt'
const emitter = mitt()
export default emitter

utils/mitt.ts 中

import mitt, { Emitter } from 'mitt'

// 定义类型别名，因全局使用并且需要自定义事件名称，所以使用索引签名定义内容
type Events = {
	[propName: string]: any
}

// 提供泛型参数让 emitter 能自动推断参数类型
const emitter: Emitter<Events> = mitt<Events>()

export default emitter

使用

   // 触发自定义总线why，并传入一个对象
   emitter.emit("foo",{name:'foo',age:19})

   emitter.on("foo",msg=>{
        console.log("HomeContent接收到得About发送得数据了：",msg);
    });

    // emitter.on的第一个参数如果是 * 代表监听所有的事件触发！
    // 这时，回调函数的参数就会有2个，1是事件的类型，2是实际实参

    emitter.on("*",(eventType,item)=>{
     console.log(`* 监听到的事件类型是：${eventType},接收的参数为：`,item)
    })

    // 取消指定的mitt事件 --需要将回调定义在外部
    const onFoo = () => { }
    emitter.on('foo',onFoo) // 监听
    emitter.off('foo',onFoo) // 取消监听

    // 取消所有的mitt事件
    emitter.all.clear()