Vue3中的事件总线详解

npm install mitt

// event-bus.js
import mitt from 'mitt';

// 创建一个 mitt 实例并导出
const emitter = mitt();

export default emitter;

<!-- PublisherComponent.vue -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script setup>
import { ref } from 'vue';
import emitter from './event-bus.js'; // 导入事件总线

const message = ref('Hello from Vue 3!');

const sendMessage = () => {
  // 发布一个名为 'messageEvent' 的事件，并携带数据
  emitter.emit('messageEvent', message.value);
  // 也可以发布没有数据的事件
  // emitter.emit('someNotification');
};
</script>

<!-- SubscriberComponent.vue -->
<template>
  <div>收到消息: {{ receivedMessage }}</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import emitter from './event-bus.js'; // 导入事件总线

const receivedMessage = ref('');

// 定义处理事件的函数
const handleMessage = (data) => {
  receivedMessage.value = data;
  console.log('收到数据:', data);
};

// 组件挂载后订阅事件
onMounted(() => {
  emitter.on('messageEvent', handleMessage);
});

// 组件卸载前取消订阅
onUnmounted(() => {
  emitter.off('messageEvent', handleMessage);
});
</script>

<!-- App.vue -->
<template>
  <PublisherComponent />
  <SubscriberComponent />
</template>

<script setup>
import { ref, provide } from 'vue';
import PublisherComponent from './components/PublisherComponent.vue';
import SubscriberComponent from './components/SubscriberComponent.vue';

// 1. 创建一个响应式对象来存储事件和监听器（简化版）
const eventBus = ref({});

// 2. 创建事件总线的方法
const eventBusMethods = {
  $on(event, callback) {
    if (!eventBus.value[event]) {
      eventBus.value[event] = [];
    }
    eventBus.value[event].push(callback);
  },
  $emit(event, ...args) {
    if (eventBus.value[event]) {
      eventBus.value[event].forEach(callback => callback(...args));
    }
  },
  // 可以自行实现 $off 等功能
};

// 3. 将事件总线方法提供给所有子组件
provide('eventBus', eventBusMethods);
</script>

<!-- PublisherComponent.vue -->
<template>
  <button @click="$emitMessage">发送</button>
</template>

<script setup>
import { inject } from 'vue';

// 注入事件总线
const eventBus = inject('eventBus');

const $emitMessage = () => {
  eventBus.$emit('myEvent', '一些数据');
};
</script>

<!-- SubscriberComponent.vue -->
<template>
  <div>消息: {{ message }}</div>
</template>

<script setup>
import { ref, inject, onMounted, onUnmounted } from 'vue';

// 注入事件总线
const eventBus = inject('eventBus');
const message = ref('');

const handleEvent = (data) => {
  message.value = data;
};

onMounted(() => {
  eventBus.$on('myEvent', handleEvent);
});

// 注意：这个简易实现需要更复杂的逻辑来实现 $off，这里省略了取消订阅
// onUnmounted(() => { ... });
</script>