建设银行金牛支行网站网页制作学习教程

概述：与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信。

// 引入mitt 
import mitt from "mitt";// 创建emitter
const emitter = mitt()/*// 绑定事件emitter.on('abc',(value)=>{console.log('abc事件被触发',value)})emitter.on('xyz',(value)=>{console.log('xyz事件被触发',value)})setInterval(() => {// 触发事件emitter.emit('abc',666)emitter.emit('xyz',777)}, 1000);setTimeout(() => {// 清理事件emitter.all.clear()}, 3000); 
*/// 创建并暴露mitt
export default emitter

接收数据的组件中：绑定事件、同时在销毁前解绑事件：

import emitter from "@/utils/emitter";
import { onUnmounted } from "vue";
​
// 绑定事件
emitter.on('send-toy',(value)=>{console.log('send-toy事件被触发',value)
})
​
onUnmounted(()=>{// 解绑事件emitter.off('send-toy')
})

【第三步】：提供数据的组件，在合适的时候触发事件

import emitter from "@/utils/emitter";
​
function sendToy(){// 触发事件emitter.emit('send-toy',toy.value)
}

注意这个重要的内置关系，总线依赖着这个内置关系

第三：emitter:

解除事件：