在 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 方法移除事件监听
• 确保在组件销毁时移除事件监听，以避免内存泄漏。
• 使用事件总线时要注意命名冲突，可以通过命名空间等方式来避免。