vue3中如何使用全局事件总线

在Vue 3中，全局事件总线通常用于应用程序中各组件之间的通信，尤其是在单文件组件(SFC)之间需要跨模块传递数据和触发操作的时候。Vue.js本身并没有内置的全局事件总线，但是你可以通过以下步骤创建一个：

1. 定义一个独立的模块或文件来作为事件中心，比如`store.js`：

// store.js
import { createApp } from 'vue';

export const eventBus = new Vue();

export function emit(event, data) {
  eventBus.$emit(event, data);
}

export function on(event, callback) {
  eventBus.$on(event, callback);
}

2. 在`main.js`或其他启动文件中初始化这个全局事件总线，并暴露出去供其他组件引用：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store/store.js';

const app = createApp(App);
app.use(store);
app.mount('#app');

现在，你可以像这样在任何组件中使用事件总线：

// 组件A
import { on, emit } from '@/store/store.js';

export default {
  methods: {
    sendData() {
      emit('eventName', { keyData: 'some value' });
    },
    handleEvent(data) {
      // 处理接收到的数据
      console.log(data);
    }
  },
  mounted() {
    on('eventName', this.handleEvent);
  },
  beforeDestroy() {
    off('eventName', this.handleEvent); // 可选，移除监听
  }
};