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

文章目录

前言
一、自定义的 useMitt
二、在组件中使用 useMitt：
三、确保 useMitt 的单例性
总结

前言

在 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 函数获取），它们能够顺利地进行通信。