vue3跨组件(多组件)通信：事件总线【Event Bus】
// 创建一个新的 Vue 应用作为事件总线
const EventBus = Vue.createApp({});
// 安装事件总线
EventBus.config.globalProperties.$bus = new Vue({});
// 在任何组件中，发送事件
this.$bus.$emit('eventName', data);
// 在任何组件中，监听事件
this.$bus.$on('eventName', (data) => {
// 处理事件
});
// 在组件销毁前，移除事件监听，避免内存泄露
this.$bus.$off('eventName');在这个例子中，我们创建了一个全新的 Vue 应用作为事件总线，并通过 Vue.createApp({}) 创建了一个新的 Vue 实例。然后，我们通过 Vue.prototype.$bus 将这个实例添加到全局属性中，使得任何组件都可以通过 this.$bus 访问它。通过 $emit 发送事件和通过 $on 监听事件，我们可以在多个组件之间实现通信。最后，为了避免内存泄露，我们在组件销毁前使用 $off 移除事件监听器。
评论已关闭