一、全局事件总线是什么
全局事件总线是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中实现组件间通信的一种利器，它可以让组件在没有直接父子关系的情况下相互交互。开发者可以通过全局事件总线来协调多个组件的行为，提高交互性和可重用性。
原创文章，作者：ZFYMY，如若转载，请注明出处：https://www.506064.com/n/315944.html
微信扫一扫 
支付宝扫一扫 