全局 事件总线
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()