Vue事件总线

下面是一个使用 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 中的数据。通过这种方式，我们就实现了两个组件间的通信。