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过渡使用也可能导致代码难以维护和追踪。因此，在实现组件间通信时，应该根据具体情况选择合适的方法，并避免过度依赖某一种方法。