vue通信 eventBus使用事例，代码怎么写

Vue.js 中的事件总线（Event Bus）是一种常见的解决方案，用于在组件之间传递数据或触发跨层级操作。它通常是一个独立于组件的应用全局单例，可以处理应用状态的变化和信息的共享。这里有一个简单的 Vue 事件总线使用示例：

首先，创建一个名为 `eventBus` 的全局变量（如果尚未引入 Vuex 等状态管理库，因为它们有自己的事件机制），例如在 main.js 文件中：

// main.js
import Vue from 'vue';
const EventBus = new Vue();

export default EventBus;

然后，在需要发送事件的地方，比如一个按钮点击事件：

<!-- ParentComponent.vue -->
<template>
  <button @click="sendData">点击触发事件</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      EventBus.$emit('dataSent', { key: 'value' });
    }
  }
};
</script>

接着，在接收事件的组件中监听这个事件：

<!-- ChildComponent.vue -->
<template>
  <div>{{ receivedData }}</div>
</template>

<script>
import EventBus from '@/main';

export default {
  data() {
    return { receivedData: '' };
  },
  mounted() {
    EventBus.$on('dataSent', (data) => {
      this.receivedData = JSON.stringify(data);
    });
  },
  beforeDestroy() {
    EventBus.$off('dataSent');
  }
};
</script>

在这个例子中，当 `ParentComponent` 触发 `dataSent` 事件并传入数据，`ChildComponent` 就会接收到这个数据并在页面上显示。