Vue中的Event Bus(事件总线) Vue中的Event Bus(事件总线)在Vue中，使用event bus是一种常见的实现组件间通信的方法。Event bus是一个空的Vue实例，用于在应用程序内部传递事件。本篇博客将介绍如何创建和使用Vue event bus。创建event bus首先，需要创建一个event bus，可以将其定义为一个单独的文件，并在应用程序中引入：// EventBus.js 文件中 import Vue from 'vue' export default new Vue()在这个示例中，我们将new Vue()的实例作为event bus，然后通过export default将其导出。发送事件在发送方组件中，可以通过this.$emit()方法触发一个自定义事件，并将需要传递的数据作为参数传递：// 发送方组件中 import EventBus from '@/path/to/EventBus.js' methods: { handleClick() { // 触发自定义事件，并传递参数 EventBus.$emit('my-event', 'hello from sender') } }在这个示例中，我们通过EventBus.$emit()方法触发了一个名为my-event的自定义事件，并向其中传递了一个字符串类型的参数'hello from sender'。接收事件在接收方组件中，可以通过EventBus.$on()方法订阅该自定义事件并处理其响应：// 接收方组件中 import EventBus from '@/path/to/EventBus.js' mounted() { // 订阅自定义事件 EventBus.$on('my-event', this.handleMyEvent) }, methods: { handleMyEvent(msg) { console.log(msg) } }在这个示例中，我们在接收方组件的mounted()生命周期钩子函数中订阅了名为my-event的自定义事件，并指定其响应方法为handleMyEvent()。当该自定义事件被触发时，handleMyEvent()方法就会被调用，并将接收到的参数打印到控制台中。结论通过event bus可以使得不同层级的组件之间进行通信，而不需要通过props属性或slot来传递数据。但是，event bus过渡使用也可能导致代码难以维护和追踪。因此，在实现组件间通信时，应该根据具体情况选择合适的方法，并避免过度依赖某一种方法。