EventBus-事件总线

当你使用事件总线（Event Bus）进行通信时，它提供了一种简单的方式来在Vue组件之间传递消息，但它并不是直接实现响应式数据传递的方式。
在Vue中，你可以创建一个全局的Vue实例作为事件总线，充当消息的中转站。这个事件总线实例可以用来发布和订阅事件，让不同的组件之间进行通信。

以下是使用事件总线进行通信的步骤：

创建事件总线实例：

const bus = new Vue();

在发送组件中，通过事件总线实例发布（触发）一个事件，并传递数据：

bus.$emit('event-name', eventData);

在接收组件中，通过事件总线实例订阅事件，并定义事件处理函数来处理接收到的数据：

bus.$on('event-name', eventHandler);

详细示例：

首先，我们需要创建一个事件总线实例。在Vue应用的入口文件（通常是main.js），添加以下代码：

import Vue from 'vue';
// 创建事件总线实例
export const bus = new Vue();

在发送组件中，我们将使用$emit方法来发布一个事件，并传递数据。例如，假设我们有一个按钮组件（SenderComponent），点击按钮时需要向其他组件发送消息。在该组件中，可以编写如下代码：

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { bus } from '@/main'; // 导入事件总线实例

export default {
  methods: {
    sendMessage() {
      const message = 'Hello, receiver!'; // 要发送的消息
      bus.$emit('message', message); // 发布名为'message'的事件，并传递消息数据
    }
  }
}
</script>

在接收组件中，我们将使用$on方法来订阅事件，并定义事件处理函数来处理接收到的数据。例如，假设我们有一个消息显示组件（ReceiverComponent），它需要接收并显示发送的消息。在该组件中，可以编写如下代码：

<template>
  <div>
    <h2>接收到的消息：</h2>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
import { bus } from '@/main'; // 导入事件总线实例

export default {
  data() {
    return {
      receivedMessage: '' // 接收到的消息
    };
  },
  created() {
    // 在组件创建时订阅事件
    bus.$on('message', this.handleMessage);
  },
  beforeDestroy() {
    // 在组件销毁之前取消订阅事件，避免内存泄漏
    bus.$off('message', this.handleMessage);
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message; // 处理接收到的消息，并更新组件的数据
    }
  }
}
</script>

在上述示例中，发送组件（SenderComponent）通过bus.$emit('message', message)发布了名为'message'的事件，并传递了消息数据。接收组件（ReceiverComponent）在创建时使用bus.$on('message', this.handleMessage)订阅了事件，并定义了事件处理函数handleMessage来处理接收到的消息。在事件处理函数中，我们更新了接收组件的receivedMessage数据，从而更新了组件的视图。
通过这种方式，发送组件和接收组件之间实现了简单的通信。每当发送组件点击按钮时，接收组件就会接收到消息并更新显示。

组件通信——EventBus

EventBus-事件总线

以下是使用事件总线进行通信的步骤：

详细示例：