Vue 3 使用 mitt 实现任意组件通信

Vue 3 使用 mitt 实现任意组件通信

在开发 Vue 应用时，我们经常会遇到一个场景：如何在没有父子关系的组件之间传递数据？例如，组件 A 和组件 B 是兄弟组件，或者组件 A 想向组件 C（可能是孙子组件）传递数据。这种场景下，传统的 props 和自定义事件可能就不够用了。那么，如何实现这种任意组件之间的通信呢？

问题情景：如何实现任意组件通信？

假设你正在开发一个应用，其中包含多个组件，它们之间需要共享数据或触发操作。例如：

• 组件 A 和组件 B 是兄弟组件，A 需要将数据传递给 B。

• 组件 C 是组件 D 的子组件，但需要从组件 E 获取数据。

这种场景下，如何实现组件之间的通信呢？

解决方案：使用 mitt

mitt 是一个轻量级的事件发布/订阅库，它允许你在任意组件之间传递数据。它的原理类似于事件总线（Event Bus），但更加简洁和高效。

安装 mitt

首先，你需要安装 mitt：

bash复制

npm install mitt

mitt只有200字节，占用内存很小。

使用 mitt 的步骤

1. 创建一个事件发射器（Emitter）

创建一个文件（如 src/utils/emitter.ts），用于初始化 mitt：

TypeScript复制

// src/utils/emitter.ts
import mitt from 'mitt';

const emitter = mitt();
export default emitter;

2. 在组件中使用 Emitter

组件 A（发送数据）

vue复制

<template>
  <div>
    <h4>组件 A</h4>
    <button @click="sendData">发送数据给组件 B</button>
  </div>
</template>

<script setup>
import emitter from '@/utils/emitter';

function sendData() {
  emitter.emit('send-data', 'Hello from Component A');
}
</script>

组件 B（接收数据）

vue复制

<template>
  <div>
    <h4>组件 B</h4>
    <p>从组件 A 收到的数据：{{ receivedData }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import emitter from '@/utils/emitter';

const receivedData = ref('');

emitter.on('send-data', (data) => {
  receivedData.value = data;
});
</script>

运行效果

1. 组件 A：

• 包含一个按钮，点击按钮时触发事件 send-data，并传递数据（如字符串 "Hello from Component A"）。

1. 组件 B：

• 监听事件 send-data，接收到数据后将其显示在页面上。

效果展示

• 点击组件 A 中的按钮后，组件 B 会接收到数据并显示：

  从组件 A 收到的数据：Hello from Component A

mitt 的 API

mitt 提供了以下核心 API：

1. emitter.on(event, handler)：绑定事件监听器。

2. emitter.emit(event, data)：触发事件并传递数据。

3. emitter.off(event, handler)：解绑事件监听器。

4. emitter.clear()：清空所有事件监听器。

注意事项

1. 解绑事件监听器

• 在组件卸载时，建议解绑事件监听器，以避免内存泄漏。

• 使用 onUnmounted 钩子解绑事件：

  JavaScript复制

  ```JavaScript import { onUnmounted } from 'vue';

onUnmounted(() => { emitter.off('send-data'); }); ```

就像张三和李四约好周一去吃饭，突然张三要嘎了，在噶之前要取消约会，让李四好忙别的，不占用公共资源😂

1. 事件名称规范

• 推荐使用 kebab-case（短横线命名），例如 send-data。

总结

通过 mitt，你可以轻松实现任意组件之间的通信。具体步骤如下：

1. 安装 mitt：npm install mitt。

2. 创建事件发射器：在项目中初始化 mitt。

3. 绑定事件监听器：在接收数据的组件中使用 emitter.on。

4. 触发事件：在发送数据的组件中使用 emitter.emit。

5. 解绑事件：在组件卸载时解绑事件监听器。