您的位置:

全局事件总线:Vue中实现组件间通信的利器

一、全局事件总线是什么

全局事件总线是Vue框架提供的一种组件间通信方式。它可以让这些组件在没有直接父子关系的情况下相互传递信息,适用于非父子组件之间的通信。

二、全局事件总线的使用

1. 全局事件总线使用

全局事件总线可以通过创建一个专为事件处理而生的Vue实例来实现。这个Vue实例被用作中央事件总线,任何组件都可以使用它的实例方法来订阅或者发布事件。

const EventBus = new Vue()
export default EventBus

在Vue实例组件中可以使用EventBus.$emit()来触发事件,而其他Vue实例组件中可以使用EventBus.$on()来订阅事件。

// 触发事件
EventBus.$emit('edit', this.id)

// 订阅事件
EventBus.$on('edit', id => {
  this.editingId = id
})

2. 全局事件总线和Vuex

全局事件总线和Vuex都提供了组件之间交互的方式,而Vuex主要解决了大型单页应用中状态的管理,而全局事件总线可以实现简单的组件之间的通信。

3. 全局事件总线on

全局事件总线的on方法是用来订阅事件的。当这个事件被触发时,事件处理程序会被调用。on方法的第一个参数是事件名称,第二个参数是回调函数。

// 订阅事件
EventBus.$on('title-click', event => {
  console.log(event.target)
})

4. 全局事件总线off

off方法用来取消订阅事件。它需要两个参数:事件名称和回调函数。只有事件名称和回调函数都匹配才会被取消。

const titleClickHandler = event => {
  console.log(event.target)
}
// 订阅事件
EventBus.$on('title-click', titleClickHandler)

// 取消订阅事件
EventBus.$off('title-click', titleClickHandler)

三、全局事件总线的原理

全局事件总线的运作原理与DOM事件相似。全局事件总线的监听器保存在Vue实例的_events属性中。视图组件中的$emit方法会向这个实例的监听器发送事件。实现了事件的触发和订阅。

四、Vue3全局事件总线

在Vue3之后,由于全局事件总线Vue实例中的_$emit和_$on私有属性,已经无法访问。因此,在Vue3之后,需要使用Vue3 Composition API在全局状态下进行跨组件通信。

import { reactive, readonly } from 'vue'

const state = reactive({
  message: 'Hello from EventBus in Vue3!'
})

function updateMessage(msg) {
  state.message = msg
}

export default {
  state: readonly(state),
  updateMessage
}

五、全局事件总线安装

全局事件总线是一个Vue插件,因此它可以通过Vue.use()方法来安装。

import Vue from 'vue'
import EventBus from './event-bus'

Vue.use(EventBus)

六、全局事件总线使用场景

在项目中,可以使用全局事件总线来协调不同组件的行为,例如用户与视图组件的交互,或多个视图组件之间的协作等。

七、全局事件总线不起作用

在使用过程中,如果全局事件总线不起作用,建议从以下几个方面来排查问题:

1. 是否安装了全局事件总线插件?

2. 全局事件总线是否被正确导入,并赋值给Vue.prototype?

3. 订阅的事件名称和触发的事件名称是否一致?

4. 订阅的组件实例和触发事件的组件实例是否是同一实例?

八、全局事件总线没有效果

如果全局事件总线没有效果,考虑以下几个问题:

1. 事件处理程序是否被正确调用?

2. 是否传递了正确的参数给事件处理程序?

3. 订阅事件时,监听器的返回值是否有问题?返回false时不会触发回调函数。

结语

全局事件总线是Vue中实现组件间通信的一种利器,它可以让组件在没有直接父子关系的情况下相互交互。开发者可以通过全局事件总线来协调多个组件的行为,提高交互性和可重用性。