mitt 通信
mitt 简介
在 Vue 应用中，我们经常遇到这样的情况：两个组件之间没有直接的父子关系，但需要共享数据或者互相通信。比如，一个页面中的头部组件需要知道用户点击了侧边栏的某个菜单项。这时候，使用 props 和事件会非常麻烦，因为需要经过多层组件的传递。mitt 就是为了解决这种问题而存在的。
mitt 是一个小巧的 JavaScript 事件发射器库，它只有 200 字节左右，但功能非常强大。它允许我们在任意组件之间建立通信，无论这些组件在组件树中的位置如何。你可以把 mitt 想象成一个"事件广播系统"，任何组件都可以在这个系统上发送消息，也可以监听其他组件发送的消息。
mitt 的优势
mitt：非常轻量，API 简洁，专门为现代 JavaScript 设计，是 Vue 3 社区中最流行的事件总线方案。
它的 API 只有三个方法：on（监听事件）、emit（触发事件）、off（取消监听），学习成本很低。
使用教程
安装 mitt
打开终端，在项目根目录下运行：
npm i mitt建立文件
为了让整个应用都能使用同一个事件总线，我们通常会在一个单独的文件中创建 mitt 实例，然后导出这个实例供其他模块使用。
在项目的 utils 文件夹中（如果没有就创建一个），新建一个名为 emitter.ts 的文件：
// utils/emitter.ts // 导入 mitt import mitt from 'mitt' // 创建一个 mitt 实例 // 这个实例就是我们的事件总线，所有组件都通过它与其它组件通信 const emitter = mitt() // 导出这个实例 export default emitter这个文件的作用是创建一个全局的事件总线实例。我们在整个应用中都会使用这个实例，这样所有组件才能在同一个"广播系统"中通信。
mitt 的基本 API
在开始使用之前，我们先了解一下 mitt 的三个核心方法：
emitter.on(eventName, callback)：监听事件。当名为 eventName 的事件被触发时，callback 函数会被调用。
emitter.emit(eventName, data)：触发事件。触发名为 eventName 的事件，并将 data 数据传递给所有监听该事件的回调函数。
emitter.off(eventName, callback)：取消监听事件。移除对 eventName 事件的监听。如果不传递 callback 参数，则会移除该事件的所有监听函数。
实例
假设我们有两个兄弟组件：哥哥组件和弟弟组件。哥哥想要给弟弟传递一个数据。
首先，我们分析一下通信流程：
接收数据的组件（弟弟）：需要提前监听事件，准备好接收数据。
发送数据的组件（哥哥）：在合适的时候触发事件，并传递数据。
首先，在弟弟组件中监听事件：
<!-- BrotherYounger.vue --> <template> <div class="younger"> <h3>弟弟组件</h3> <p>从哥哥那里接收到的数据：{{ receivedData }}</p> </div> </template> <script setup> import { ref, onMounted, onUnmounted } from 'vue' // 导入事件总线实例 import emitter from '@/utils/emitter' const receivedData = ref('') // 组件挂载后开始监听事件 onMounted(() => { // 监听名为'sendA'的事件 // 当这个事件被触发时，回调函数会被调用，参数value就是传递过来的数据 emitter.on('sendA', (value) => { receivedData.value = value console.log('弟弟收到了数据：', value) }) }) // 组件卸载前取消事件监听 onUnmounted(() => { emitter.off('sendA') }) </script>在弟弟组件中，我们做了以下几件事：
1. 导入事件总线实例 emitter。
2. 在 onMounted 生命周期钩子中，使用 emitter.on 监听名为 'sendA' 的事件。当这个事件被触发时，回调函数会被调用，参数 value 就是哥哥组件传递过来的数据。
3. 在 onUnmounted 生命周期钩子中，使用 emitter.off 取消对 'sendA' 事件的监听。这一步非常重要，可以避免内存泄漏。
然后，在哥哥组件中触发事件：
<!-- BrotherElder.vue --> <template> <div class="elder"> <h3>哥哥组件</h3> <button @click="sendDataToYounger">给弟弟发送数据</button> </div> </template> <script setup> // 导入事件总线实例 import emitter from '@/utils/emitter' const sendDataToYounger = () => { const data = '这是哥哥发送的数据A' // 触发名为'sendA'的事件，并传递数据 emitter.emit('sendA', data) console.log('哥哥发送了数据：', data) } </script>在哥哥组件中，我们做了以下几件事：
1. 导入事件总线实例 emitter。
2. 定义一个方法 sendDataToYounger，当按钮被点击时调用这个方法。
3. 在方法中，使用 emitter.emit 触发名为 'sendA' 的事件，并传递数据。
现在，当用户点击哥哥组件中的按钮时，'sendA' 事件会被触发。弟弟组件监听到这个事件，就会执行回调函数，将接收到的数据赋值给 receivedData 变量，这样模板中就会显示这个数据。
重要注意事项：及时解绑事件
使用 mitt 时，有一个非常重要的注意事项：一定要在组件卸载时解绑事件。如果不解绑，即使组件已经被销毁，它的事件监听函数仍然存在于事件总线中。这会导致两个问题：
1. 内存泄漏：监听函数一直存在，无法被垃圾回收器回收。
2. 错误调用：当事件再次被触发时，会调用到已经不存在的组件的函数，可能导致错误。
因此，我们一定要在 onUnmounted 生命周期钩子中解绑事件。如果组件监听了多个事件，可以分别解绑：
onUnmounted(() => { emitter.off('sendA') emitter.off('sendB') // ... 解绑所有监听的事件 })参考文章：https://blog.csdn.net/2301_80216352/article/details/155522600