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 来实现。


全局事件监听:

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


目录
打赏
0
0
0
0
5
分享
相关文章
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
192 64
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
173 60
|
4月前
|
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
155 58
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
235 1
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
163 3
从Vue 2到Vue 3的演进
从Vue 2到Vue 3的演进
103 17
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
126 17
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
82 8
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
73 1
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等