面试题：Vue中事件总线在组件通信场景下的具体实现

创建事件总线：在Vue项目中，通常在一个单独的文件（例如 eventBus.js）里创建事件总线实例。

import Vue from 'vue';
export const eventBus = new Vue();

这一步创建了一个空的Vue实例，该实例将作为事件总线，用于在组件间传递事件。

在发送事件的组件中触发事件：假设我们有一个 ComponentA.vue 组件。

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

<script>
import { eventBus } from './eventBus';
export default {
  methods: {
    sendMessage() {
      eventBus.$emit('custom-event', '这是来自ComponentA的消息');
    }
  }
};
</script>

这里，当按钮被点击时，sendMessage 方法通过 eventBus.$emit 触发一个名为 custom - event 的事件，并携带一个消息作为参数。$emit 方法的第一个参数是事件名称，后续参数是传递给事件处理函数的数据。

在接收事件的组件中监听事件：假设我们有一个 ComponentB.vue 组件。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { eventBus } from './eventBus';
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    eventBus.$on('custom-event', (data) => {
      this.message = data;
    });
  }
};
</script>

在 ComponentB 的 created 钩子函数中，使用 eventBus.$on 来监听名为 custom - event 的事件。当这个事件被触发时，回调函数会被执行，将接收到的数据赋值给组件的 message 数据属性，从而在模板中显示出来。$on 方法的第一个参数是事件名称，第二个参数是事件触发时执行的回调函数。

星途面试题库

面试题：Vue中事件总线在组件通信场景下的具体实现

知识考点

面试题答案