vue3中的event bus

简介: vue3中的event bus

vue3中的event bus

前言

event Bus在vue3中事实上已经被删除了,因为官方说它可能会导致一些潜在的问题。如,在大型项目中使用 Event Bus 可能会变得难以维护和调试,同时也可能会影响应用程序的性能。

此外,在 Vue 3.x 中已经有更多先进和强大的工具来进行组件之间通信,例如 provide/inject 和 Emit/Listeners 等机制。因此,Vue 3.x 团队决定删除 Event Bus,以鼓励开发者使用更好的解决方案。


但是还有很多项目是相对较小的,依然是可以使用的。尽管有了更好的方法,但是在不滥用的情况下,event bus还是有适合它的使用场景的,甚至在某些场景下,它更简单,更方便。

vue2中的event bus

Vue 2 中的事件总线 Event Bus 是一种用于跨组件通信的机制。通过创建一个全局的 EventBus 对象,可以在任何组件中触发和监听自定义事件,实现组件之间的解耦。

Event Bus 的实现步骤如下:

⭐创建一个全局的 EventBus 对象

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

⭐在需要使用 Event Bus 的组件中引入并注册 EventBus 对象

// ComponentA.vue
import { eventBus } from './EventBus';
export default {
  name: 'ComponentA',
  methods: {
    handleClick() {
      // 触发自定义事件
      eventBus.$emit('custom-event', data);
    }
  },
  created() {
    // 监听自定义事件
    eventBus.$on('custom-event', (data) => {
      console.log('Received data:', data);
    });
  }
}

⭐在另一个组件中也可以引入并注册 EventBus 对象,然后同样通过 $emit 和 $on 方法进行事件的触发和监听。

使用 Event Bus 可以轻松地实现兄弟、父子等关系不直接相连的组件之间进行通信。但是,如果过度使用会导致代码难以维护和理解,建议在必要时才使用 Event Bus。


所以,不要滥用,不要滥用,不要滥用!!!

event bus在vue3中的体现

event Bus(事件总线)是一种在组件之间通信的模式,它可以让任何两个组件之间进行通信,而不必担心组件层次结构或父子关系。在 Vue 3 中,event Bus 的实现方式与 Vue 2 相同,即通过创建一个全局 Vue 实例作为中央事件总线。但是在 Vue 3 中,由于引入了 Composition API,我们可以使用 provide 和 inject API 来创建自己的 event Bus。这种方式更加灵活,可以更好地支持 Composition API。

创建一个vue3的event bus

⭐在 Vue 3 中,可以使用 createApp 函数创建应用实例,并使用 provideinject API 来创建一个支持 Vue 3 的 Event Bus。

// EventBus.js
import { createApp, inject } from 'vue'
const EventBusSymbol = Symbol()
const EventBus = {
  install(app) {
    const eventBus = createApp({})
    app.provide(EventBusSymbol, eventBus)
  },
  useEventBus() {
    const eventBus = inject(EventBusSymbol)
    if (!eventBus) {
      throw new Error('Event Bus not found')
    }
    return eventBus
  }
}
export default EventBus

我们首先创建了一个 EventBusSymbol,用于标识我们创建的全局事件总线。然后,我们定义了一个 EventBus 对象,该对象包含了一个 install 方法和一个 useEventBus 方法。


在 install 方法中,我们使用 createApp 函数创建了一个空的 Vue 应用实例,并通过 app.provide 方法将其挂载到应用实例上,使其成为一个全局的事件总线。


在 useEventBus 方法中,我们使用 inject API 获取到应用实例,如果不存在则抛出一个错误。然后,我们返回这个应用实例,这样就可以在组件中使用它来进行事件的发布和订阅了。


OK,继续。我们在 Vue 3 中创建一个支持 Event Bus 的应用实例:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import EventBus from './EventBus'
const app = createApp(App)
app.use(EventBus)
app.mount('#app')

在上面的代码中,我们首先导入 EventBus 对象,然后使用 app.use 方法将其挂载到应用实例上。这样,我们就可以在应用中使用 useEventBus 方法来获取全局事件总线了。

封装的event bus最优使用场景

尽管在 Vue 3 中提供了一些新的 API,如 provide/injectEmits/Listeners 等,这些功能可以用来处理组件之间的通信,而且更加强大和灵活。

因此,在某些情况下,Vue 3 提供的方法可以完全替代 Vue 2 的 Event Bus。但是,在一些特定场景下,创建一个event Bus 可能仍然是一个不错的选择。


比如说:


非父子组件之间的通信:

如果需要在非父子关系的组件之间进行通信,可以使用自己封装的 Event Bus 实现跨级通信。


多个兄弟组件之间的通信:

如果需要多个兄弟组件之间相互通信,则可以使用自己封装的 Event Bus 来实现。


全局事件监听:

如果需要在任何地方都能监听到某个事件并做出响应,则可以使用自己封装的全局事件总线来实现。


相关文章
|
18小时前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
3天前
|
JavaScript Java API
vue3知识点:setup
vue3知识点:setup
16 5
|
3天前
|
资源调度 JavaScript 前端开发
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
14 5
|
16小时前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
3天前
|
API
vue3知识点:reactive对比ref
vue3知识点:reactive对比ref
14 3
|
4天前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
13 3
|
3天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
13 2
|
3天前
|
JavaScript API
Vue3快速上手简介
Vue3快速上手简介
14 2
|
3天前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
11 1
|
3天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
10 0