Vue3 事件总线 mitt

在 Vue3 中，mitt 是一个轻量级的发布/订阅模式的事件总线库。它允许组件之间进行通信，而无需通过父组件传递数据或使用 Vuex 等状态管理库。

以下是 mitt 的基本用法：

1. 安装 mitt

npm install mitt

2. 创建一个事件总线实例

import mitt from "mitt";
const eventBus = mitt();
window.$bus = eventBus; // 将事件总线挂载到全局变量中，以便直接访问
default eventBus // 导出事件总线实例，以便在组件中使用

3. 在组件中使用事件总线

• 触发事件：

  window.$bus.emit("eventName", data);

  其中，eventName 是事件的名称，data 是要传递给事件的任何数据。

• 监听事件：

  const unsubscribe = window.$bus.on("eventName", (data) => {
    // 处理事件的回调函数
  });

  其中，eventName 是事件的名称，回调函数会在事件发生时被调用，并接收到传递的数据。

• 取消事件监听：

  unsubscribe();

  当不再需要监听某个事件时，可以调用返回的取消函数来停止监听。

4. 示例代码

// ComponentA.vue
import { ref } from 'vue';
import eventBus from './eventBus';

export default {
  setup() {
    const message = ref('');

    function handleButtonClick() {
      eventBus.emit('myEvent', 'Hello from Component A!');
    }

    return {
      message,
      handleButtonClick,
    };
  },
};

// ComponentB.vue
import { ref } from 'vue';
import eventBus from './eventBus';

export default {
  setup() {
    const message = ref('');

    function handleMyEvent(payload) {
      message.value = payload;
    }

    const unsubscribe = eventBus.on('myEvent', handleMyEvent);

    return {
      message,
      unsubscribe,
    };
  },
};

在上面的示例中，ComponentA 触发了一个名为 myEvent 的事件，并传递了字符串 'Hello from Component A!'。ComponentB 监听了该事件，并在事件发生时更新了 message 的值。

这就是 mitt 的基本用法，它可以帮助你在 Vue3 中实现组件间的通信，而无需使用复杂的状态管理库。