Vue 全局事件总线：Vue 2 vs Vue 3 实现

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

这里写自定义目录标题

Vue 全局事件总线：Vue 2 vs Vue 3 实现
- 引言
- Vue 2 全局事件总线
- - 实现步骤
- Vue 3 全局事件总线
- - 实现步骤
- 比较与结论
- - Vue 2 事件总线
  - Vue 3 事件总线

Vue 全局事件总线：Vue 2 vs Vue 3 实现

引言

在构建大型Vue应用时，跨组件通信是一个常见需求。Vue提供了多种通信方式，包括父子组件传参、兄弟组件通信、Vuex状态管理等。然而，对于简单的跨组件通信，全局事件总线（Event Bus）提供了一种轻量级的解决方案。本文将比较在Vue 2和Vue 3中实现全局事件总线的方法，并探讨各自的优缺点。

Vue 2 全局事件总线

在Vue 2中，全局事件总线通常通过创建一个新的Vue实例来实现，这个实例作为中央枢纽供所有组件使用。

实现步骤

创建事件总线

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

在组件中使用事件总线

<template><button @click="emitEvent">发射事件</button>
</template><script>
import { EventBus } from './event-bus.js';export default {methods: {emitEvent() {EventBus.$emit('my-event', '这是来自组件A的消息');}}
}
</script>

<template><div><h2>事件消息：{{ message }}</h2></div>
</template><script>
import { EventBus } from './event-bus.js';export default {data() {return {message: ''};},created() {EventBus.$on('my-event', this.handleEvent);},methods: {handleEvent(msg) {this.message = msg;}},beforeDestroy() {EventBus.$off('my-event', this.handleEvent);}
}
</script>

Vue 3 全局事件总线

Vue 3引入了组合式API，提供了更多灵活性。我们可以利用这些新特性来实现全局事件总线。

实现步骤

创建事件总线

// event-bus.js
import { reactive, readonly } from 'vue';const state = reactive(new Map());function emit(event, payload) {(state.get(event) || []).forEach((callback) => callback(payload));
}function on(event, callback) {if (!state.has(event)) {state.set(event, []);}state.get(event).push(callback);return () => off(event, callback);
}function off(event, callback) {const callbacks = state.get(event);if (callbacks) {callbacks.splice(callbacks.indexOf(callback), 1);}
}export const EventBus = {emit,on,off,readonly: readonly(state),
};

在组件中使用事件总线

<template><button @click="emitEvent">发射事件</button>
</template><script setup>
import { EventBus } from './event-bus.js';const emitEvent = () => {EventBus.emit('my-event', '这是来自组件A的消息');
};
</script>

<template><div><h2>事件消息：{{ message }}</h2></div>
</template><script setup>
import { ref, onUnmounted } from 'vue';
import { EventBus } from './event-bus.js';const message = ref('');const listener = (msg) => {message.value = msg;
};EventBus.on('my-event', listener);onUnmounted(() => {EventBus.off('my-event', listener);
});
</script>