Vue项目全局注册EventBus

已于 2022-05-15 14:51:01 修改
阅读量690 收藏 1
点赞数
文章标签： vue.js javascript 前端
于 2022-05-13 11:10:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joker_qian/article/details/124747922
版权

1，在入口man.js文件中 使用:

Vue.prototype.$EventBus = new Vue()

2，在需要传值的地方:

this.$EventBus.$emit('incident',data)

3，在需要接受的地方:

this.$EventBus.$on('incident')

建议：在使用eventBus传值的时候组件中是有缓存的，在接受方使用

this.$EventBus.$off('incident') 清除掉

joker_qian
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue - EventBus
qq_39085060的博客
02-08 362
vue – 事件总线 EventBus EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为组件传递数据的桥梁的，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。 官方推荐的状态管...
VUE 创建全局事件 eventbus
qq_42052896的博客
01-05 1359
VUE 创建全局事件 eventbusVue组件通讯父子组件通讯存在的局限性EventBus的简介EventBus的使用初始化发送事件接收事件移除事件监听者 Vue组件通讯 Vue组件数据通讯常常会有父子组件，兄弟组件，祖孙组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。 父子组件通讯存在的局限性 我们了解到，vue中为了提高组件的复用和重用性，通常会分割成独立的组件，这时候就会存在父组件与子组件。父组件通过props传递数据给子组件，子组件通过emit通知父组件做相应的动作。 但是这种父子组件
Vue的全局事件总线（GlobalEventBus）
计算机小白学前端~
05-27 451
一、定义 一种组件间的通信方式，适用于任意组件间的通信 二、安装全局事件总线 new Vue({ el: '#app', render: h => h(App), beforeCreate() { Vue.prototype.$bus=this // 安装全局事件总线，$bus就是当前应用的vm } }) 三、使用事件总线 1. 接收数据 A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件...
前端框架vue之全局事件总线(GlobalEventBus)
qq_45496282的博客
07-06 714
在全局事件总线出现之前，如果说子组件想要给父组件传递数据，交互信息时，需要通过给子组件绑定自定义事件，再借用函数来实现组件间的交互，比较麻烦！全局事件总线是一种组件间通信的方式，适用于任意组件间通信。全局事件总线并不是插件，配置文件等等，事件总线是程序员在做Vue开发中总结积累的一套方法，是一套规则，只要满足这套规则，就可以实现组件间的通信。 实现途径：需要满足两点要求，一要全局事件都能看见，二，再绑定全局对象on,on,on,off,$emit。首先在main文件里面实现，全局可见。 即利用vue中最重要
vue 全局事件(eventBus)设置
咖啡如同生活的专栏
06-03 1万+
使用vue的时候，我们有时候需要不同的组件之间进行数据的传递，这个时候就需要使用emit和on进行数据传递，当然子父组件还有props数据传递，今天主要讲解emit和on全局事件的数据传递，代码如下：import Vue from 'vue' import axios from 'axios' import App from './App' import router from './route...
[vue] EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？
歌谣的博客
03-03 678
[vue] EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？ 建议在created里注册，在beforeDestory移出 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
【Vue】全局事件总线（EventBus）的使用
qq_44862029的博客
07-07 863
注册事件总线 main.js 使用 接收 销毁事件总线 注意 使用完最好要在beforeDestroy中销毁
详解vue 组件之间使用eventbus传值
08-29
在 Vue 组件之间传递数据是一种常见的需求，vuex 是一个非常流行的解决方案，但是对于小型项目或者简单的数据传递，使用 Vuex 可能会显得过于复杂。这时，使用 EventBus 就是一个不错的选择。 EventBus 是一种轻量...
Vue中使用的EventBus有生命周期
10-18
总结来说，在Vue项目中使用EventBus时，应该非常小心地管理事件的监听和清理，以避免潜在的内存泄漏问题。如果可以通过组件的生命周期钩子来自动处理这些事情，将大大减轻开发者的负担，并提高代码的健壮性和可维护...
2021-10-21 vue笔记-组件化开发(四) 组建通信:非父子通信-事件总线,在vue项目中使用eventbus的例子
GAARA
10-21 158
1、初始化，创建一个事件总线并导出，以便其他模块可以使用并监听它； // eventBus.js import Vue from 'vue' //通过一个空的Vue实例作为中央事件总线（事件中心） export const EventBus = new Vue() 2、导入eventBus，使用$emit发送数据； 3、导入$on，使用$on接收数据； 4、如果想移除事件，可以先导入eventBus，通过$off移除；（eventBus.$off ( 'add', {} )）
使用use注册Vue全局组件和全局指令的方法
08-27
下面小编就为大家分享一篇使用use注册Vue全局组件和全局指令的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue采用EventBus实现跨组件通信及注意事项小结
11-30
EventBus EventBus是一种发布/订阅事件设计模式的实践。 在vue中适用于跨组件简单通信，不适应用于复杂场景多组件高频率通信，类似购物车等场景状态管理建议采用vuex。 挂载EventBus到vue.prototype 添加bus.js文件 //src/service/bus.js export default (Vue) => { const eventHub = new Vue() Vue.prototype.$bus = { /** * @param {any} event 第一个参数是事件对象，第二个参数是接收到消息信息，可以是任意类型 * @me
vue之全局事件总线$bus
我心坚持
02-16 2449
、、、、、、、、、、、仅对以前所学做复习记录使用、、、、、、、、、 全局事件总线是组件间的一种通信方式，适用于任意组件间通信。 主要原理是根据VueComponent.prototype.__ proto__ = Vue.prototype来进行全局应用。 1、安装事件总线 在vue实例中写入beforeCreate beforeCreate(){ Vue.prototype.$bus = this } 其中的bus是个约定俗成的名字，你也可以起其他名字。 this指向vue实例。 共有两
Vue全局事件总线$bus
叶鹤的博客
05-02 1930
Vue全局事件总线$bus 文章目录Vue全局事件总线$bus全局事件总线（GlobalEventBus）安装事件总线使用事件总线接收数据提供数据解绑事件最后给出一个例子代码 全局事件总线（GlobalEventBus） 是一种组件间通讯方式，适用于任意组件间通信 可以这样理解，举个小栗子，比如在兄弟组件中进行通讯，组件1要给组件2传递组件1的一个数据，这就可以有几种方法， 最简单想到的就是将组件1数据先传给App组件，再由App组件把数据传递给组件2，这样实现的兄弟间的通信会很麻烦， 那么就可以通过事件总
vue任意组件间通信：全局事件总线bus
qq_44883077的博客
03-29 1874
Vue组件间的通信 父 => 子，子 => 父，都可以通过简单的props实现传参，兄弟组件间以及其他任意组件间的通信除了使用vuex、storage，还可以使用全局事件总线。 全局事件总线 全局事件总线，相当于一个中间人，任何组件间想要实现通信，都可以通过全局事件总线，一般定义为$bus。作为数据的接收者组件，只要在$bus身上绑定自定义事件，并将回调函数留在接收者组件自身；在数据的提供者组件中通过触发绑定在$bus上的自定义事件，同时携带参数，就可以实现两个组件间的通信 注册全局事件总线 前
Vue2.0开发之——组件数据共享-Eventbus(39)
我的博客
01-14 872
兄弟组件之间数据共享的方案—EventBusEventBus的使用步骤EventBus的使用示例more。
Vue中eventBus的实现，以及开发基础常用方法记录
oyxm____的博客
01-12 278
Vue中eventBus的实现，以及开发基础常用方法记录
Vue中 EventBus 的使用，如何实现Vue中的EventBus
热门推荐
程邓楠的博客
02-20 1万+
vue 中兄弟组件或者多级组件之间的通讯，是比较麻烦的，这个时候呢，我们就可以使用 EventBus来实现我们想要的业务，但是面试的时候又经常会被问到，或者让写出 EventBus，所以就来探索一下 一、Vue中如何使用 EventBus？ 1. 初始化时全局定义 import Vue from 'vue' // main.js 中 // 第一种定义方式 Vue.prototype.$eventBus = new Vue() // 第二种定义方式 window.eve...
Vue.js中事件总线EventBus的使用
weixin_43862492的博客
08-11 1732
eventBus事件总线的安装配置和使用
vue2中的eventbus
最新发布
05-19
EventBus可以理解为一个全局的事件系统，任何一个组件都可以通过EventBus来发布事件或订阅事件，从而实现组件之间的解耦。 在Vue中，我们可以使用一个新的Vue实例作为事件总线，通过该实例的$emit()方法来发布事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值