下面是一个使用 Vue 事件总线实现两个组件间通信的完整例子：
假设我们有两个组件 A 和 B，需要在它们之间进行通信。具体来说，当组件 A 中的按钮被点击时，需要向组件 B 发送一个事件，使得组件 B 中的数据被更新。
创建 EventBus
首先，在 Vue 应用中创建一个 EventBus，通常可以在 main.js 中创建并将其挂载到 Vue.prototype 上，使得它可以在所有组件中使用：
import Vue from 'vue';
const EventBus = new Vue();
Vue.prototype.$eventBus = EventBus;
组件 A 中发送事件
在组件 A 中，可以通过 this.\(eventBus.\)emit(eventName, args) 方法来发送事件。假设我们需要在组件 A 中监听按钮的点击事件，并在事件中发送一个名为 'updateData' 的自定义事件，可以按照以下方式实现：
<template>
<div>
<button @click="sendUpdateEvent">更新数据</button>
</div>
</template>
<script>
export default {
methods: {
sendUpdateEvent() {
// 发送名为 'updateData' 的自定义事件
this.$eventBus.$emit('updateData', { newData: 'some data' });
},
}
};
</script>
在这个例子中，我们在按钮的点击事件中调用了 sendUpdateEvent 方法，并在方法中通过 this.\(eventBus.\)emit 方法发送了一个名为 'updateData' 的自定义事件，并传递了一个包含数据的对象 { newData: 'some data' }。
组件 B 中监听事件
在组件 B 中，可以通过 this.\(eventBus.\)on(eventName, callback) 方法来监听事件。假设我们需要在组件 B 中监听名为 'updateData' 的自定义事件，并在事件中更新组件 B 中的数据，可以按照以下方式实现：
<template>
<div>
<p>{{ data }}</p>
</div>
</template>
<script>
export default {
data() {
return {
data: 'initial data',
};
},
created() {
// 监听名为 'updateData' 的自定义事件
this.$eventBus.$on('updateData', ({ newData }) => {
// 更新数据
this.data = newData;
});
},
};
</script>
在这个例子中，我们在组件 B 中通过 this.\(eventBus.\)on 方法监听了名为 'updateData' 的自定义事件，并在回调函数中更新了组件 B 中的数据。
这样，在组件 A 中点击按钮时，就会触发自定义事件并更新组件 B 中的数据。通过这种方式，我们就实现了两个组件间的通信。