vue任意组件基本通信方法—mitt

在学习和工作中，我们难免会遇到一些突发情况，例如临时提出的通信需求。在这种紧急且需要快速响应的场景中，采用mitt方法无疑是最快捷、最简便的解决方案。

首先mitt是个插件，我们需要先安装mitt。

npm i mitt

然后在utils下创建文件emitter.ts

emitter.ts的代码

// 引入mitt
import mitt from 'mitt'
 
// 调用mitt得到emitter，emitter能：绑定事件、触发事件
const emitter = mitt()
 
export default emitter

使用方法：

我们以从A.vue到B.vue传递为例

A->B

1.在A.vue和B.vue导入emitter

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

2.在A.vue中定义传递事件

const example = () => {
    a.value=b.value
  	emitter.emit('toggleInspection', a.value);
    //toggleInspection为传递的事件名，a.value为实际传递的值
};

3.在B.vue中定义监听事件

onMounted(() => {
  emitter.on('toggleInspection', (b.value) => {
    c.value=b.value //将toggleInspection的值赋给b.value，再对其进行下一步操作
  });
});

同时也要在组件销毁后定义监听取消，避免内存泄漏

onUnmounted(() => {
  emitter.off('toggleInspection');
});

到此为止就已经基本实现了组件之间的相互通信。

mitt组件通信实现简单快捷，那么代价是什么呢？

现在，我们来看看mitt的一些缺陷：

1.需要手动管理生命周期，在组件销毁时需手动取消事件监听，否则可能引发内存泄漏（轻则程序卡顿，重则造成安全隐患）。

2.增加耦合度，组件间通过事件总线通信，增加了耦合度，难以追踪事件来源和去向，导致维护困难。

3.复用性差，需要在各个组件中重新写一遍逻辑。

4.不适合复杂状态管理，只能管理事件。

综上所述，mitt对于小型项目或者解决一些突发问题是个不错的选择，但是对于长期或者大型项目而言不太建议。