vue中this.$root.Bus.$on多次调用方法被覆盖或者出现多次调用的情况

最新推荐文章于 2024-03-03 14:46:15 发布
置顶 最新推荐文章于 2024-03-03 14:46:15 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： vue 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixu_boke/article/details/112187026
版权
前端 同时被 2 个专栏收录
30 篇文章 0 订阅
订阅专栏
vue
26 篇文章 0 订阅
订阅专栏

在spring boot的前端vue项目中，各个组件间进行的方法通信：this.$root.Bus.$on问题

比如我在组件中进行全局化的通知

上面的这种情况就会出现后面的覆盖前面的，造成联动的失败，并且如果不进行判断的话就会出现重复调用的情况

所以我需要在我的组件方法中添加vue的生命周期beforeDestory，当一个使用完之后，就先清除了，然后再通知下一个

lixu_boke
关注
专栏目录
Vue的this.$root.Bus.$on事件被多次触发、多次监听的问题
qq_26963495的博客
01-15 1万+
前端vue项目中，各个组件（非父子关系也可）之间可以通过Bus进行事件通信。 main.js中： import Vue from 'vue' const Bus = new Vue(); const app = new Vue({ el: '#app', data: {Bus}, router, components: {App}, template: '<App/...
兄弟组件传数据:全局事件总线this.$bus.$emit/$on组件跳转过程多次发请求并且页面无法渲染的问题
qq_47530527的博客
03-30 2615
实现业务描述：有A和B两个组件要进行传一个哈希值，A组件获取哈希值后，需要跳转到兄弟组件B组件并且将哈希值传到B组件，具体代码如下图所示： A组件的逻辑 B组件的逻辑 问题描述：A组件中getContent事件只被emit触发了一次，但是B组件this.$Bus.$on中的回调函数却被执行了多次的现象。并且伴随着A组件与B组件跳转过程中回调函数被执行次数会依次增加。 产生原因：this.$Bus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件即A组件被注销，但.
Vue for循环请求同一url参数不同但参数覆盖问题
奇点
05-19 1410
今天搞Vue 遇到一个比较怪异的问题，看代码 let self=this for(leti=0;i<data.length;i++){ letitem=data[i] item['id']=i+1//赋值序号 item['similarity']=parseFloat(item['similarity']).toFixed(2) ...
触发的时候页面中的$on事件多次触发
chelflan's blog
04-11 3052
**eventBus中央通信，会触发多次的原因**原因1.第一次触发的时候页面中的on事件没有被触发2. 为什么后面再一次依次去触发的时候会出现，每一次都会发现好像之前的on事件分发都没有被撤销一样，导致每一次的事件触发执行越来越多解答：1. 当我们还在页面A的时候，页面B还没生成，也就是页面B中的 created中所监听的来自于A中的事件还没有被触发。这个时候当你A中emit事件的时候，B其实是...
$root组件传参
liutianxiao123的博客
08-29 255
兄弟组件间传参，在mounted里接受。
vue事件中$on重复触发的问题
Hollow_GLs的博客
07-25 1450
在做一个小项目练习时，我在主页用了自己做的轮播图组件，用$on监听图片加载是否完成，加载完成再使用轮播图。 mounted() { this.$bus.$on('DSwiper', () => { this.init() }) }, 当我在另外一个页面也用轮播图时，发现轮播图重复加载了，原因是没有清除在首页的监听，导致在另一个页面用轮播图时重复监听。 解决方法是在进入另一个页面，生成轮播图组件时清除事件监听。 created() { this.$bu.
解决vue bus.$emit触发第一次$on监听不到问题
10-15
在使用bus.$on接收事件之前，应该先使用this.$bus.$off方法注销事件，防止出现多次绑定导致的重复事件处理： ```javascript this.$bus.$off('test'); // 先注销事件 this.$bus.$on('test', function(msg) { // ...
vue中使用this.$root.Bus.on，但是不调用this.$root.Bus.off，会产生什么问题？
07-14
在Vue中使用`this.$root.$on`绑定事件监听器后，如果没有调用`this.$root.$off`进行解绑，会导致潜在的内存泄漏问题。 当您使用`this.$root.$on`方法绑定事件监听器时，Vue会在组件销毁时自动解绑这些事件。然而，...
vue基础 - 11 （组件间的通信：event bus -- 事件车，$emit，$on，$off，封装一个事件车）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-04 836
技术名称: event bus -- 事件车 场景： 在`头部组件`中点击搜索按钮， 需要把输入框的值传递给`商品组件` 这些组件的共同点： 同一个vue对象管理的， 这些组件中的`this.$root` (root:根源,根) 是同一个对象 Vue对象提供3个方法： - `$emit('事件名', 参数)`：触发一个事件 - `$on(监听事件名, 回调函数)`：监听指定事件触发 - `$off(监听事件)`： 删除事件的监听 例子： 1、触发事件： Header....
实例详解vue中的$root和$parent
11-27
在Vue.js框架中，$root和$parent是两个非常重要的属性，它们允许我们在组件之间进行数据和方法...在遇到需要跨多个层级组件通信的情况时，可以考虑使用事件总线（Event Bus）或者Vuex来实现更为灵活和可控的通信方式。
vue组件间切换 this.$bus.$on会多次调用问题
weixin_44545815的博客
11-21 3140
this.$bus.$on 向容器添加了一个事件监听，当页面跳转时，原来的组件没有注销。事件监听不会被移除，再次进入该组件后 又会向bus容器添加重复的事件监听器
vue兄弟组件 bus传值
DR1sxy的博客
08-21 375
vue兄弟组件 bus传值 首先 main.js里边加上这些 const Bus = new Vue() new Vue({ data:{ Bus } }) 在需要传值的地方使用 this.root.Bus.root.Bus.root.Bus.emit(“name”, “我是兄弟组件”); 在接收的地方使用 this.root.Bus.root.Bus.root.Bus.on(“name”, r...
同一页面组件多次引用，Bus.$on & $off
qq_34388186的博客
07-21 541
同一页面组件多次引用，Bus.$onduo
解决vue+typescript使用bus遇到this.bus.on多次触发的问题
weixin_43776965的博客
12-10 1186
bus,ts,typescript,vue
vue中bus.$on事件被多次绑定
qq_32184753的博客
07-21 1309
办法二：注册的总线事件（Bus）要在组件销毁时(beforeDestroy/destroyed)卸载。办法一：在每次调用方法前先解绑事件( bus.
多次使用事件车$Bus,连续三次以上,$on接受失效问题
最新发布
nss33678的博客
03-03 444
经过两个小时的反复复现和测试问题，发现每次下单后都会跳转到订单中心，然后再点击购物车列表进行下单，和路由跳转有关系。然后跳别的页面没事，就是和跳的那个页面有关系。页面里面也有接受别的事件车，在destoryed里面用到了this.$Bus.$of(),没有指定销毁哪个事件，所以把下单跳转过来刷新购物车数量的事件车给销毁了。其实还是小问题，this.$Bus.$of('renewTabs'),指定销毁的事件就好了。这样就不会误销毁别的事件车了。最近在做下单时，连续三次下单，发现后购物车数量不刷新问题。
关于vue基于bus事件总线通信时$on同一时间内多次被触发问题解决方案
cabinx的博客
09-17 1961
关于vue基于bus事件总线通信时$on同一时间内多次被触发问题解决方案 1.问题描述： vue项目在兄弟组件中使用了bus事件总线通信，当前使用场景是：在A页面通过bus.$emit传递给B组件一个信号，此信号的作用是告知B组件打开dialog弹窗，而B组件接收到信号后出现了多次弹窗问题，此问题根源在于bus.$on在同一时间多次触发。 2.解决方案： 这里解决方案的核心是先关闭接收再触发接收，即： mounted() { bus.$off('test') bus.
VUE Bus事件中心触发多次问题
叫我起来，我还能敲代码！
06-08 894
当VUE兄弟组件传值时候用到bus事件中心，但是当A组件$emit时候，B在mounted接收（$on）。会触发多次。 解决方法： 当A组件需要传值得时候用Bus.$emit触发，然后在B组件mounted中先销毁$off再接收$on
Vue路由跳转后eventBus.$on多次触发的问题
han_xiao_xiao的博客
10-26 912
描述：一个点击事件，多次触发回调函数，使得加载图的loading多次触发，叠加显示，关闭不掉遮罩。eventBus.$on事件初始点击执行了两次,而且每点击一次就多执行一次。可以在子组件被销毁前解除绑定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值