Vue面试题：如何使用事件总线进行组件间数据传输？

Posted 2023-04-03 袁代码

问题：

假设你正在为一个大型企业级Vue应用程序编写代码，并且需要在多个组件之间传递数据。其中一个组件需要从另一个组件中获取数据，但是这个组件可能还没有加载完成。在这种情况下，你会采取什么措施来确保数据的可靠传输？请提供代码示例来解释你的解决方案。

答案：

在这个场景中，为了确保数据的可靠传输，我们可以使用Vue.js提供的非常有用的特性——事件总线。事件总线是一个事件系统，用于在组件之间传递消息。它可以用于在同一Vue实例中的任何组件之间传递消息，这使得它成为跨组件通信的理想解决方案。

要实现事件总线，我们可以创建一个全局Vue实例，并在它上面添加事件和监听器。这个全局Vue实例可以用来作为跨组件通信的媒介。下面是一个示例代码：

// 创建一个全局的Vue实例来作为事件总线
var eventBus = new Vue();

// 在需要传递数据的组件中，触发事件并将数据作为参数传递
eventBus.$emit('event-name', data);

// 在需要接收数据的组件中，监听事件并在回调函数中处理数据
eventBus.$on('event-name', function(data) 
  // 处理数据
);

在上面的代码中，我们创建了一个全局的Vue实例来作为事件总线。在发送组件中，我们使用$emit()方法触发一个事件，并将数据作为参数传递。在接收组件中，我们使用$on()方法监听同样的事件，并在回调函数中处理数据。

使用事件总线可以解决组件之间数据传输的可靠性问题，因为它能够确保数据在正确的时刻被传递。即使接收组件还没有加载完成，它也可以在事件触发后立即接收数据。

解析：

这个问题涉及到Vue.js中一个重要的主题——组件通信。在Vue.js中，组件通信可以通过父子组件之间的props、子组件向父组件触发事件、使用Vuex进行状态管理等多种方式来实现。然而，在大型应用程序中，这些方式可能不足以满足我们的需求。

因此，事件总线是一个非常有用的工具，它可以跨越组件层次结构进行通信，实现数据的可靠传输。有些人可能会选择使用Vuex来解决这个问题，因为Vuex是一个专门为Vue.js设计的状态管理库，可以帮助我们更好地管理数据。然而，使用Vuex也可能会增加代码的复杂性，特别是在较小的应用程序中。

事件总线是一个更简单的解决方案，因为它不需要引入任何外部库或工具。只需要创建一个全局Vue实例，就可以在任何组件中使用它来传递数据。这使得它成为一个非常灵活和易于使用的工具，特别是在大型应用程序中。

不过事件总线并不是完美的解决方案，因为它可能会引入一些不必要的耦合。在应用程序变得更加复杂时，使用Vuex或其他更高级的状态管理工具可能会更加合适。

当你在编写Vue.js应用程序时需要考虑组件之间的通信问题时，事件总线是一个非常有用的工具，可以帮助你在任何组件之间传递数据。使用事件总线不仅可以提高代码的可读性和可维护性，还可以使你的应用程序更加灵活和易于扩展。

#yyds干货盘点#vue使用事件总线进行模块之间的通信

       vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。而eventBus又称事件总线。在Vue中可以使用eventBus作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行的通知其他组件。

      事件总线也是一种通信方式，只不过它的功能比较强大，不在局限于父传子或兄弟组件之间通信，它可以跨组件通信，通过事件总线传递的值，不管哪个组件都可以获取到。

定义在组件中使用:

// 在组件中
import Vue from vue
export const EventBus = new Vue()

定义在全局中使用（main.js文件）

// 创建全局EventBus
Vue.prototype.$EventBus = new Vue()
 
var EventBus = new Vue()
Object.defineProperties(Vue.prototype, 
  $bus: 
    get: function () 
      return EventBus
    
  

发送事件

​如果有两个组件之间需要通信，A组件与B组件 A组件中点击按钮发送了消息，想通知B组件

使用$emit发送信息

 <!-- A组件 -->
<template>
    <button @click="sendMsg()">-</button>
</template>
 
<script> 
export default 
  省略...
  methods: 
    sendMsg() 
      EventBus.$emit("aMsg", 来自A页面的消息);
    
  
; 

接收事件

​使用$on用来接收信息

 
<!-- B组件 -->
<template>
  <p>msg</p>
</template>
 
<script> 
export default 
  data()
    return 
      msg: 
    
  ,
  mounted() 
    EventBus.$on("aMsg", (msg) => 
      // A发送来的消息
      this.msg = msg;
    );
  
;

同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法

// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))
 
// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))

移除事件

// 移除指定的事件监听
EventBus.$off(aMsg, )
// 移除所有的事件监听
EventBus.$off()

• 监听事件总线上的事件---调用 $on 方法
• 触发事件总线上的事件---调用 $emit 方法
• 取消监听事件总线上的事件---调用 $off 方法

我们可以借助 vue 示例来实现事件总线，也可以自行封装；我使用了第一种方法。

因此事件总线配置文件---​​eventBus.js ​​的代码如下：

import Vue from "vue";
const eventBus = new Vue();
/*
 * 事件名：mainScroll
 * 含义：主区域滚动条位置变化后触发
 * 参数：
 * - 滚动的dom元素，如果是undefined，则表示dom元素已经不存在
 */
//在Vue.prototype原型上注册事件总线，方便vue实例对象监听和触发
Vue.prototype.$bus = eventBus;
//导出事件总线，方便在其他js模块监听和触发事件总线上的事件
export default eventBus;