第三十三：6.3.【mitt】任意组件通讯

概述：与消息订阅与发布（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:

解除事件：