事件总线

本节目标：理解“事件总线”的核心思路，并能把它用于实际开发或面试表达。 事件总线(Event Bus)是Vue中的一种模式，用于非父子组件之间的通信。Vue组件的数据流是单向的，而有时在非父子关系的组件之间传递数据可能会变得困难。事件总线提供了一种解决这一问题的方法，允许组件发送事件，其他组件可以监听这些事件，从而实现任意组件之间的通信。

Vue 3中如何使用事件总线： 在Vue 3中，Vue提供了更现代化的Composition API，而传统的事件总线方法（使用Vue.prototype）不再推荐使用。相反，我们可以使用一个简单的发布/订阅模型来实现事件总线。

下面是一个Vue 3中使用事件总线的简单示例： import { reactive, readonly } from 'vue'; class EventBus { constructor() { this.events = reactive({}); } $on(event, handler) { if (!this.events[event]) { this.events[event] = []; } this.events[event].push(handler); } $off(event, handler) { if (!this.events[event]) return; const index = this.events[event].indexOf(handler); if (index > -1) { this.events[event].splice(index, 1); } } $emit(event, ...args) { if (this.events[event]) { this.events[event].forEach(handler => handler(...args)); } } } export const bus = readonly(new EventBus());

两种方式的区别： Vue.prototype.$bus = new Vue();：这种方式创建了一个全新的Vue实例作为事件总线。任何组件都可以通过this.$bus来访问这个事件总线，用于发送或接收事件。

Vue.prototype.$bus = this;：这种方式将根Vue实例作为事件总线。这意味着你正在使用应用的根实例作为事件的中心点。

更好的方案：

• 对于小型应用，事件总线可能是一个不错的选择。但是，随着应用的增长，管理通过事件总线发送的事件可能变得困难。
• Vue 3 提供了 Composition API 和 Provide/Inject API，这些更现代的方法也可以用于组件间的通信。
• 同时，对于大型应用，你可能会更倾向于使用专门的状态管理库（如 Vuex）。

总之，选择哪种方式取决于您的应用的规模和需求。对于小型应用，事件总线可能足够了。但随着应用的增长，考虑使用Vuex或其他状态管理解决方案可能更为合适。

使用场景 示例 假设我们有两个组件：ComponentA 和 ComponentB。

• ComponentA 是一个按钮，点击它会触发一个事件。
• ComponentB 是一个文本，它需要知道按钮何时被点击。

在 main.js 中： new Vue({ created() { Vue.prototype.$bus = this; // 设置事件总线 }, // ...其他选项 }).$mount('#app');

在 ComponentA 中： <template> <button @click="buttonClicked">Click Me!</button> </template> <script> export default { methods: { buttonClicked() { // 触发名为 'button-click' 的自定义事件，并传递数据 this.$bus.$emit('button-click', 'The button was clicked!'); } } }; </script>

在 ComponentB 中： <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'No message yet.' }; }, created() { // 监听名为 'button-click' 的自定义事件，并更新消息 this.$bus.$on('button-click', (newMessage) => { this.message = newMessage; }); }, beforeDestroy() { // 在组件销毁之前移除事件监听，防止内存泄漏 this.$bus.$off('button-click'); } }; </script> 这样，当你在 ComponentA 中点击按钮时，ComponentB 中的文本将会更新。

注意：虽然使用事件总线是一种可行的解决方案，但它可能不是所有情况下的最佳实践。