Vue Event Bus 事件总线的封装与使用（JavaScript）

最新推荐文章于 2023-12-02 13:30:23 发布
最新推荐文章于 2023-12-02 13:30:23 发布
阅读量144 收藏
点赞数
文章标签： vue.js javascript 前端 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/debug_bug142/article/details/133213088
版权
JavaScript 专栏收录该内容
306 篇文章 6 订阅 ¥59.90 ¥99.00
订阅专栏

事件总线（Event Bus）是Vue.js框架中常用的一种通信机制，它允许组件之间进行解耦的通信。在Vue中，我们可以通过事件总线来实现组件之间的数据传递和通知机制。本文将介绍如何封装和使用Vue的事件总线。

事件总线的封装

首先，我们需要在Vue应用中创建一个事件总线。我们可以使用Vue实例作为事件总线，将其作为全局对象来使用。下面是一个简单的事件总线封装示例：

// event-bus.js

import Vue from 'vue';

const EventBus = new Vue();

export default EventBus;

在上述代码中，我们通过导入Vue并

了解本专栏 订阅专栏 解锁全文
碧海蓝天·
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
订阅专栏
Vue.js的事件总线-JavaScript开发
05-26
vue-bus Vue.js的事件总线，同时支持Vue 1.0和2.0。 有关更多详细信息，请参见Vue文档。 安装您可以通过yarn或npm安装它。 $ yarn add vue-bus $ npm install vue-bus --save这是av vue-bus Vue.js的事件总线，同时...
Vue eventBus 事件总线封装下再用才香
小王的技术库
08-19 320
🙇‍🙇‍🙇‍。现在的项目中是不是在使用 eventbus 的时候，还有很多人都是直接创建一个vue 实例直接使用的，哪里需要哪里引入，而没有简单的处理下。接下来就先说下这种方式。
Vue全局事件总线$bus安装与应用【附带图片讲解】
annans的博客
05-09 912
Vue全局事件总线$bus安装与应用【附带图片讲解】
Vue学习记录7，全局事件总线（GlobalEventBus），TodoList案例_事件总线，消息订阅与发布（pubsub），TodoList案例_编辑，nextTick，Vue封装的过度与动画
qq_49080239的博客
08-04 132
接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的。作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的。一种组件间通信的方式，适用于。一种组件间通信的方式，适用于。回调留在A组件自身。回调留在A组件自身。，且每个元素都要指定。...
Vue3中使用事件总线bus进行深层组件间的通讯
Q10_01Q的博客
08-08 669
vue3中prototype属性被取消了，不能再使用Vue2中的方式来使用全局事件总线，目前在Vue3中推荐使用mitt这个第三方库去实现全局事件总线。
Vue 全局引入bus实现兄弟组件通信
crazyZhangxl的博客
04-20 2213
简述 本文是一篇记录vue使用技巧的简短文章，该文记录的是vue中兄弟组件间通信的方式，之前经历了第一个vue app项目，也是想积淀一下，之前是在项目中是在需要的vue中对bus进行引入，对于这类常见的工具最好提倡是全局引入进行一定的封装。 局部使用案例 bus.js import Vue from 'vue' export const Bus = new Vue(); 接收总线通知 imp...
eventbus封装
xu_yi_hang的博客
06-30 306
eventbus就是数据总线，全局通信的一种方案。很多语言都有这个东西。我的看法是这个东西看似好像很好用，随便哪里都能通信，代码写的还不多，好理解。实际除非你的项目很小，需要全局维护的地方不多，用这个图个快捷方便。使用问题还是多多，重复发布相同名称的事件就有bug了，发布了不卸载，就内存泄露了。项目中用的多了，就难以维护了。吐槽：我目前面对的问题是，接手了一个项目，总是会内存溢出。我就去通过开发者工具去排查，发现这个内存总是下不来。
Vue全局Bus
杨凌超的博客
01-25 2392
Vue组件嵌套太深，要实现组件之间的通信，又因项目太小不想用Vuex怎么办，来一起写一个Vue全局Bus吧。 众所周知，一个中央事件总线bus，我们可以用来解决兄弟组件和嵌套很多层的组件之间的通信问题，一个页面 一个页面的引入又太麻烦，直接写一个Vue插件全局引入。 const install = (Vue) => { const Bus = new Vue({ methods: { ...
Vue中全局事件总线$bus的使用备忘
Zhaof_Notes
01-05 287
Vue中全局事件总线$bus的使用备忘
Vue全局事件总线
weixin_47810787的博客
12-15 610
Vue全局事件总线 （1）绑定全局事件总线 在main.js构造Vm对象实例 Vue.prototype.$bus=new Vue() (2)使用事件总线 使用事件总线，加入组件A向组件B通信，A组件提供数据，B组件接收数据 提供数据 this.$bus.$emit('事件名'，数据) 接收数据 this.$bus.$on('事件名'，回调函数) 组件事件销毁解绑 最好在beforeCreate钩子中，用$off去解绑当前组件索通到的事件 this.$bus.$off('事件名') A组件向B组件发送
Vue全局事件总线$bus
叶鹤的博客
05-02 1754
Vue全局事件总线$bus 文章目录Vue全局事件总线$bus全局事件总线（GlobalEventBus）安装事件总线使用事件总线接收数据提供数据解绑事件最后给出一个例子代码 全局事件总线（GlobalEventBus） 是一种组件间通讯方式，适用于任意组件间通信 可以这样理解，举个小栗子，比如在兄弟组件中进行通讯，组件1要给组件2传递组件1的一个数据，这就可以有几种方法， 最简单想到的就是将组件1数据先传给App组件，再由App组件把数据传递给组件2，这样实现的兄弟间的通信会很麻烦， 那么就可以通过事件总
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
10-15
主要介绍了解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现图片预览组件封装与使用
12-29
这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能，在父组件中每一张图片都可以实现图片放大查看。 子组件 <!--html部分--> <mt-swipe :auto=0 :show-indicators=false :...
详解vue中axios的使用与封装
10-17
主要介绍了vue中axios的使用与封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
event-bus:简单事件总线
05-02
活动巴士 适用于JavaScript应用程序的简单事件总线，无任何依赖关系，占用空间小。安装：Node.js： npm install --save eventing-busWebpack： yarn add eventing-bus或对于NPM： npm install --save eventing-bus...
Vue2-Vue3组件间通信-EventBus方式-函数封装
JackieDYH的博客
07-31 1690
Vue3中采用EventBus方式进行组件间通信与Vue2有一定区别1.创建EventBus2.使用EventBus进行通信总的来说，Vue3与Vue2在EventBus方式上的区别不大，只是在创建全局EventBus的方式上有所不同，但是使用起来差异较大，需要根据实际情况进行选择。
vue事件总线的封装eventBus
happy_kx的博客
07-28 508
代码】vue事件总线的封装eventBus。
Vue 基础组件二次封装的高级技巧及方法,能更优雅的进行二次封装组件（Vue3组件封装--继承第三方组件的Methods方法）
wocwin的博客
05-31 6558
Vue 基础组件二次封装的高级技巧及方法,能更优雅的进行二次封装组件（props 属性和 event 事件的透传、子组件插槽暴露、第三方组件方法继承）Vue3组件封装--继承第三方组件的Methods方法
vue3中如何实现事件总线eventBus
最新发布
greed
12-02 1086
由于vue3中 “$ on”，$ off 和 $ once 实例方法已被移除，组件实例不再实现事件触发接口 所以我们可以使用官方推荐的这个第三方库实现同样的效果。全局总线，vue 入口文件 main.js 中挂载全局属性。点击 按钮 b组件中的数值增加。main.ts 初始化。
vue bus事件总线如何手写
07-28
Vue的事件总线是一种在组件之间进行通信的机制，它允许一个组件触发事件并让其他组件监听和响应这些事件。如果你想手写一个简单的Vue事件总线，可以按照以下步骤进行： 1. 创建一个新的Vue实例作为事件总线： ```javascript // eventBus.js import Vue from 'vue'; const eventBus = new Vue(); export default eventBus; ``` 2. 在需要通信的组件中，导入事件总线并使用它： ```javascript // ComponentA.vue import eventBus from './eventBus'; export default { methods: { handleClick() { // 触发自定义事件，并传递数据 eventBus.$emit('customEvent', data); } } } ``` 3. 在需要监听事件的组件中，导入事件总线并使用它： ```javascript // ComponentB.vue import eventBus from './eventBus'; export default { created() { // 监听自定义事件 eventBus.$on('customEvent', this.handleCustomEvent); }, destroyed() { // 在组件销毁时取消事件监听 eventBus.$off('customEvent', this.handleCustomEvent); }, methods: { handleCustomEvent(data) { // 处理接收到的数据 } } } ``` 通过以上步骤，你就可以手写一个简单的Vue事件总线。在需要通信的组件中，使用`eventBus.$emit`来触发自定义事件，并可以传递数据；在需要监听事件的组件中，使用`eventBus.$on`来监听自定义事件，并在事件触发时执行相应的处理函数。记得在组件销毁时使用`eventBus.$off`来取消事件监听，以避免内存泄漏。 请注意，手写的Vue事件总线是一个简单的实现，它没有考虑到一些高级功能，如命名空间、多个事件总线实例等。如果需要更复杂的功能，可以考虑使用第三方插件或使用Vuex进行状态管理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值