vue中eventbus 案例

在 Vue 中，你可以使用一个全局的 Eventbus 来实现组件之间的事件通信。下面是一个简单的 Vue 中的 Eventbus 案例：

首先，创建一个名为 `eventBus.js` 的文件，用于定义全局的 Eventbus：

import Vue from 'vue';

// 创建一个空的 Vue 实例作为 Eventbus
const eventBus = new Vue();

export default eventBus;

然后，在需要进行事件通信的组件中，你可以通过导入 `eventBus.js` 并使用 `$emit` 方法来发布事件，以及使用 `$on` 方法来订阅事件。

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

<script>
import eventBus from './eventBus.js';

export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message', 'Hello, Eventbus!');
    }
  }
}
</script>

在上述组件中，当按钮被点击时，调用 `sendMessage` 方法，通过 `eventBus.$emit` 发布名为 `message` 的事件，并传递消息内容。

接下来，在接收消息的组件中，你可以通过导入 `eventBus.js` 并使用 `$on` 方法来订阅事件，并在回调函数中处理接收到的消息。

<template>
  <div>
    <p>接收到的消息: {{ message }}</p>
  </div>
</template>

<script>
import eventBus from './eventBus.js';

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    eventBus.$on('message', (message) => {
      this.message = message;
    });
  }
}
</script>

在上述组件中，使用 `eventBus.$on` 方法订阅名为 `message` 的事件，并在回调函数中将接收到的消息赋值给 `message` 数据属性，从而在模板中显示出来。

通过使用 Eventbus，你可以在不同的组件之间进行简单的事件通信，而不需要通过父子组件关系或 Vuex 进行状态管理。

希望这个案例对你有帮助！如果你还有其他问题，请随时提问。