vue组件间切换 this.$bus.$on会多次调用问题

最新推荐文章于 2024-06-05 21:59:32 发布

嘴角上扬的某某扬先生

最新推荐文章于 2024-06-05 21:59:32 发布

阅读量2.9k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44545815/article/details/127965461

版权

原因：this.$bus.$on 向容器添加了一个事件监听，当页面跳转时，原来的组件没有注销。

事件监听不会被移除，再次进入该组件后又会向bus容器添加重复的事件监听器。

解决方法：在meounted周期调用的先用this.$bus.$off(") 清除监听器

下面看具体代码：

mounted() {

this.$bus.$off('categoriesOfData'); // 先清除这个categoriesOfData监听

this.$bus.$on('categoriesOfData', data => { // 在添加监听

console.log("DropDownListcategoriesOfData----------:",data);

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

嘴角上扬的某某扬先生

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue组件间切换 this.$bus.$on会多次调用问题

this.$bus.$on 向容器添加了一个事件监听，当页面跳转时，原来的组件没有注销。事件监听不会被移除，再次进入该组件后又会向bus容器添加重复的事件监听器
复制链接

扫一扫

vue中$bus.$emit、$on的用法

活宝小娜的博客

07-13

1656

vue中$bus.$emit、$on的用法。

兄弟组件传数据:全局事件总线this.$bus.$emit/$on组件跳转过程多次发请求并且页面无法渲染的问题

qq_47530527的博客

03-30

2548

实现业务描述：有A和B两个组件要进行传一个哈希值，A组件获取哈希值后，需要跳转到兄弟组件B组件并且将哈希值传到B组件，具体代码如下图所示： A组件的逻辑 B组件的逻辑问题描述：A组件中getContent事件只被emit触发了一次，但是B组件this.$Bus.$on中的回调函数却被执行了多次的现象。并且伴随着A组件与B组件跳转过程中回调函数被执行次数会依次增加。产生原因：this.$Bus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件即A组件被注销，但.

参与评论您还未登录，请先登录后发表或查看评论

vue中$bus.$emit和$bus.$on的用法温故

最新发布

ldcaws的专栏

06-05

322

$bus. $emit、 $bus. $on 用于非父子组件之间通信。

自用this.$bus兄弟传参

weixin_59813475的博客

11-02

291

--main.js文件中全局挂载bus。---传递数据的组件中-触发事件。---接收并销毁mounted。

eventbus，在this.$on监听事件时无法在获取数据

Wu_whiteHyacinth的博客

12-22

1188

eventbus，在this.$on监听事件时无法在获取数据

从接口被频繁调用中发现：vue中event bus $on被多次触发问题

weixin_43407997的博客

04-14

1535

老板在F12中发现有一个接口被频繁调用多次各种组件排查，最终发现是bus.$on多次触发，导致我的接口被频繁调用解决方案： destroyed() { bus.$off("path");//重复调用bus问题 *** }, 总结：在使用bus传值时，emit之后要在 destroyed中关掉传值，否则就会出现多次调用的情况。 ...

vue事件中$on重复触发的问题

Hollow_GLs的博客

07-25

1384

在做一个小项目练习时，我在主页用了自己做的轮播图组件，用$on监听图片加载是否完成，加载完成再使用轮播图。 mounted() { this.$bus.$on('DSwiper', () => { this.init() }) }, 当我在另外一个页面也用轮播图时，发现轮播图重复加载了，原因是没有清除在首页的监听，导致在另一个页面用轮播图时重复监听。解决方法是在进入另一个页面，生成轮播图组件时清除事件监听。 created() { this.$bu.

解决vue bus.$emit触发第一次$on监听不到问题

10-15

主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue中的this.$options.data()和this.$data用法说明

10-15

在问题描述中提到的情况，`resetData`方法尝试通过`Object.assign`重置`this.$data`，但直接调用`this.$options.data()`会导致`data()`内部的`this`不指向组件实例，因此无法访问`props`和`methods`。解决方案是通过...

Vue 解决通过this.$refs来获取DOM或者组件报错问题

10-15

在Vue.js中，`this.$refs` 是一个非常重要的特性，它允许开发者访问Vue实例挂载的DOM元素或子组件实例。然而，在某些情况下，尝试通过`this.$refs`获取DOM或组件时可能会遇到错误。本文将深入探讨这个问题及其解决...

Vue 报错TypeError: this.$set is not a function 的解决方法

10-17

在这个例子中，`$.ajax`的`success`回调函数中的`this`并没有指向Vue实例，而是指向了回调函数本身，因此无法调用`this.$set`。 ### 报错原因在JavaScript中，函数内部的`this`值取决于函数的调用方式。在上述...

解决vue.js this.$router.push无效的问题

10-18

今天小编就为大家分享一篇解决vue.js this.$router.push无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue.js之组件间的通信

weixin_44827643的博客

07-19

617

3.在组件Jerry中的mounted函数中监听该事件，获取到num的值，进而完成相关操作。前面已经介绍了父子组件中如何进行数据的传递，本文将介绍兄弟组件间数据的传递，核心是利用。2.在组件Tom中声明自定义事件，同时传递数据。另外，可以销毁自定义事件，也是通过事件中心来销毁。进行自定义事件的声明和监听（另外还有删除）......

VUE兄弟组件之间传值，Vue.prototype.bus=new Vue(),this.bus.$on的使用方法

yier0706的博客

02-20

1725

1.在main.js中添加一个bus实例 Vue.prototype.bus=new Vue(); 2.分享按钮加点击事件；把这个true值传给组件二 <a href="#" class="wap-zl-share" @click="share1"> </a> <script> export default { data () { return { 'isShow': true } }, methods.

Vue中事件总线$bus的用法及$on、$off和$emit的使用

初辰的博客

01-19

1806

【代码】Vue中事件总线$bus的用法及$on、$off和$emit的使用。

简单描述vue事件总线$bus及$on重复触发问题

胖胖的博客

03-19

4676

使用情景非父子组件之间通信时，一层一层传太麻烦，Vuex又有点小题大做，这时就会用到。开始在main.js中创建$bus，这样就能全局使用。 Vue.prototype.$bus = new Vue() 在组件中（下面就称作组件1）通过$emit分发事件 this.$bus.$emit('imgLoad') 在另一组件中，（下面就称作组件2）通过$on来监听该组件分发出来的事件。 thi...

组件之间使用this.$bus.$on传值之前需要先this.$bus.$off注销事件

pshdhx的博客

10-26

7935

this.$bus是全局变量 a、b是两个父组件，c是子组件。 c页面触发事件： this.$bus.$emit(event) a、b页面监听c组件的事件 pagea: this.$bus.$on(event, () => { this.status = 'reserve' }) pageb: this.$bus.$on(event, () => { this.status = 'buying' }) 如果在调用了a页面之后，再调用b页面，回导致t

vue双向数据绑定、虚拟Dom、diff算法、组件通信

m0_56722063的博客

04-14

545

双向绑定的原理？数据劫持？ mvvm 双向绑定，采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。几个要点：1、实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个 ...

EventBus使用详解(二)——EventBus使用进阶