Vue组件通信-mitt

全局任意组件通信

对于非嵌套关系的组件（兄弟组件、跨越很远的组件），除了 Pinia 这种全局状态管理库外，我们也可以使用 Mitt 实现事件总线。

使用mitt

第一步：安装

vue 复制代码

npm install mitt

安装完成之后一般会自动给你创建一个文件夹叫utils，一个文件emitter.ts的文件

第一步：演示用法

绑定事件

vue 复制代码

emitter.on('test', () => {
    console.log('test被调用了');
})
emitter.on('itshare', () => {
    console.log('itshare被调用了');
})

触发事件

vue 复制代码

setInterval(() => {
    emitter.emit('test'),
        emitter.emit('itshare')
}, 1000);

注意要在main.ts临时引入一下哈

解绑事件

vue 复制代码

setTimeout(() => {
    emitter.off('test')
}, 3000);

也可以解绑所有事件

vue 复制代码

setTimeout(() => {
    emitter.all.clear()
}, 3000);

实际使用

比如我现在又两个兄弟组件，都有自己的数据

vue 复制代码

//子组件1哥哥
let toy1 = ref('奥特曼');
//子组件2弟弟
let toy2 = ref('芭比娃娃');

现在我想将芭比娃娃这个玩具给哥哥玩一下，所以我肯定要在哥哥身上绑定事件

vue 复制代码

emitter.on('getToy',（） => {
 
})

这个可以传一个值进去，这个值有弟弟传进来，因为是弟弟给哥哥玩具

vue 复制代码

<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>

然后弟弟就要去触发这个事件

vue 复制代码

<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

这种传递是全局的，不管是全局组件还是父子组件都可以传递，不管你嵌套了多少层都可以传递；

注意事项

vue 复制代码

<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这样的作法就是事件总线，它是一个全局对象，如果组件销毁了，这个回调仍然会被引用，这样这个组件被占用的内存无法被垃圾回收，可能会导致内存泄漏，性能下降等；