vue3：mitt

在 Vue 3 中使用 mitt 进行事件总线的实现非常简单。mitt 是一个轻量级的事件库，适用于 Vue 项目中的组件间通信。

实现自定义组件直接相互传值，父到子，子到子，子对子，子对孙，想怎么传就怎么传。和android的Eventbus一个玩法

1.下载mitt

npm i mitt
mac下载，如果权限不够，加sudo

2.创建个公共的utils类-emitter.ts

//引入mitt
import mitt from 'mitt'
//调用mitt，得到mitter ，mitter可以绑定事件 触发事件
const emitter=mitt()

// 暴露出去
export default emitter

3.引用和调用

import emitter from '@/utils/emitter.ts'


//发送消息
const sendMessage = () => {
    //发送消息
    emitter.emit('getMessage', '这个是来自父组件给子组件传递的值')

}


接受消息的方法
onMounted(() => {
    //初始化数据
    emitter.on('getMessage', (message) => {
        //接受到的消息
       
        console.log(message)
        getmessage.value = "收到消息：" + message
    })
})

4.卸载

onUnmounted(()=>{
    //在组件卸载的时候，手动解绑定义的绑定事件
    emitter.off('事件名')
    //解绑所有的事件
    emitter.all.clear() 

})

5.方法总结

• 发送事件：使用 emit 方法发送事件。
• 监听事件：使用 on 方法监听事件。
• 移除事件监听：使用 off 方法移除事件监听
• 确保在组件销毁时移除事件监听，以避免内存泄漏。
• 使用事件总线时要注意命名冲突，可以通过命名空间等方式来避免。