Vue组件通信-mitt
全局任意组件通信
对于非嵌套关系的组件（兄弟组件、跨越很远的组件），除了 Pinia 这种全局状态管理库外，我们也可以使用Mitt实现事件总线。
使用mitt
第一步：安装
npm install mitt安装完成之后一般会自动给你创建一个文件夹叫utils，一个文件emitter.ts的文件
第一步：演示用法
- 绑定事件
emitter.on('test', () => { console.log('test被调用了'); }) emitter.on('itshare', () => { console.log('itshare被调用了'); })- 触发事件
setInterval(() => { emitter.emit('test'), emitter.emit('itshare') }, 1000);注意要在main.ts临时引入一下哈
- 解绑事件
setTimeout(() => { emitter.off('test') }, 3000);也可以解绑所有事件
setTimeout(() => { emitter.all.clear() }, 3000);实际使用
- 比如我现在又两个兄弟组件，都有自己的数据
//子组件1哥哥 let toy1 = ref('奥特曼'); //子组件2弟弟 let toy2 = ref('芭比娃娃');- 现在我想将芭比娃娃这个玩具给哥哥玩一下，所以我肯定要在哥哥身上绑定事件
emitter.on('getToy',（） => { })- 这个可以传一个值进去，这个值有弟弟传进来，因为是弟弟给哥哥玩具
<script setup lang="ts"> import { ref } from 'vue'; import emitter from '@/utils/emitter'; let toy = ref('') let toy1 = ref('奥特曼'); emitter.on('getToy', (value: any) => { toy.value = value; }) </script> <h4>弟弟给的玩具：{{ toy }}</h4>- 然后弟弟就要去触发这个事件
<template> <div class="box"> <h3>子组件2</h3> <h4>玩具：{{ toy2 }}</h4> <button @click="emitter.emit('getToy', toy2)">把玩具给哥哥</button> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import emitter from '@/utils/emitter'; let toy2 = ref('芭比娃娃'); </script>getToy就是绑定的事件，这个toy2就是第二个参数，传给哥哥的value
这种传递是全局的，不管是全局组件还是父子组件都可以传递，不管你嵌套了多少层都可以传递；
注意事项
<script setup lang="ts"> import { ref, onUnmounted } from 'vue'; import emitter from '@/utils/emitter'; let toy = ref('') let toy1 = ref('奥特曼'); emitter.on('getToy', (value: any) => { toy.value = value; }) //在组件卸载前解绑事件 onUnmounted(() => { emitter.off('getToy') }) </script>你最好在组件挂载前解绑事件，原因是想mitt这样的作法就是事件总线，它是一个全局对象，如果组件销毁了，这个回调仍然会被引用，这样这个组件被占用的内存无法被垃圾回收，可能会导致内存泄漏，性能下降等；