Vue3实战笔记（54）—揭秘Vue3实战：1分钟学会mitt，轻松玩转跨组件通讯

---

前言

在 Vue3 中，由于官方移除了on\off 和 $once 实例方法，导致原先基于 Vue2 的事件总线（EventBus）模式不再适用。因此，对于需要进行组件间通信的场景，Vue3 推荐使用如 props、emits、provide/inject、vuex、pinia 等官方提供的方案。然而在某些情况下，开发者可能仍希望利用事件总线的简单性，特别是在小型项目中。这时，Mitt.js 就成为了一个推荐的选项，它提供了与框架无关、简洁且高效的事件监听和触发机制。

---

一、自定义的 useMitt

Mitt.js 是一个轻量级的第三方事件发射器库，专为 Vue3 和其他框架设计。

在 Vue 3 中使用 mitt 或类似的库时，我们通常会创建一个自定义的 useMitt Composition API 函数，以便在组件内部使用 mitt 的功能。这样，我们就可以利用 Vue 3 的 Composition API 来更好地组织和复用逻辑。

首先，创建一个 useMitt.js 文件，并在其中定义一个 useMitt 函数，用于返回 mitt 实例的方法。

// useMitt.js  
import mitt from 'mitt';  
  
// 创建一个 mitt 实例，并导出相关的函数  
const emitter = mitt();  
  
export function useMitt() {  
  return {  
    emit: emitter.emit.bind(emitter),  
    on: emitter.on.bind(emitter),  
    off: emitter.off.bind(emitter),  
    // 可以根据需要添加其他 mitt 方法  
  };  
}

二、在组件中使用 useMitt：

现在，你可以在任何需要通信的组件中导入并使用 useMitt 函数。每个组件都将使用相同的 mitt 实例来发射和监听事件。

代码如下（示例）：

// ChildComponent.vue  
<template>  
  <button @click="emitEvent">Emit Event</button>  
</template>  
  
<script>  
import { ref } from 'vue';  
import { useMitt } from './useMitt';  
  
export default {  
  setup() {  
    const { emit } = useMitt();  
    const message = ref('Hello from ChildComponent!');  
  
    const emitEvent = () => {  
      emit('child-event', message.value);  
    };  
  
    return {  
      emitEvent,  
    };  
  },  
};  
</script>

// ParentComponent.vue  
<template>  
  <div>  
    <ChildComponent />  
    <p v-if="receivedMessage">Received: {{ receivedMessage }}</p>  
  </div>  
</template>  
  
<script>  
import { ref, onMounted, onBeforeUnmount } from 'vue';  
import ChildComponent from './ChildComponent.vue';  
import { useMitt } from './useMitt';  
  
export default {  
  components: {  
    ChildComponent,  
  },  
  setup() {  
    const { on, off } = useMitt();  
    const receivedMessage = ref(null);  
  
    onMounted(() => {  
      on('child-event', (message) => {  
        receivedMessage.value = message;  
      });  
    });  
  
    onBeforeUnmount(() => {  
      off('child-event');  
    });  
  
    return {  
      receivedMessage,  
    };  
  },  
};  
</script>

在这个例子中，ChildComponent 发射一个名为 child-event 的事件，并附带一条消息。ParentComponent 则监听这个事件，并在接收到消息时更新其状态。由于 ChildComponent 和 ParentComponent 都使用同一个 mitt 实例（通过 useMitt 函数获取），它们能够顺利地进行通信。

三、确保 useMitt 的单例性

代码如下（示例）：

重要的是要确保在整个应用程序中只创建一个 mitt 实例，并通过 useMitt 函数共享它。这样可以避免在组件之间产生多个事件流，并确保事件的正确传播。在上面的例子中，useMitt.js 文件中的 emitter 是在模块作用域内创建的，因此每个导入 useMitt 的组件都会得到相同的实例。

---

总结

通过这种方法，你可以轻松地在 Vue 3 的多个组件之间使用 mitt 进行通信。只需确保所有组件都通过 useMitt 函数访问相同的 mitt 实例，然后就可以自由地发射和监听事件了。

童年啊，童年是永远的梦 梦里的小船，飘荡在彩虹的河流 童年的纸飞机，飞向云端 童年的歌谣，唱出心中的欢乐