（转载）vue中eventbus被多次触发（vue中使用eventbus踩过的坑）

最新推荐文章于 2023-05-31 11:18:23 发布
最新推荐文章于 2023-05-31 11:18:23 发布
阅读量489 收藏
点赞数
分类专栏： 前段学习

https://blog.csdn.net/chern1992/article/details/80392465

使用公共总线时被多次触发解决办法就是：

在B组件页面中添加Bus.$off来关闭。代码如下：

// 在B组件页面中添加以下语句，在组件beforeDestory的时候销毁。
  beforeDestroy () {
    bus.$off('get', this.myhandle)
  },
丸子妹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中eventbus被多次触发以及踩过的坑
08-28
主要介绍了vue中eventbus被多次触发以及踩过的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中eventbus被多次触发
weixin_34059951的博客
05-24 434
我们项目需求大概是这样的，有一个好友列表，每点击进入和一个好友聊天时可以送礼物给对方，因为页面的其他地方也要用到送礼的功能，我就把送礼的模块单独抽取出来成一个组件，当选择了一个礼物送给对方时，礼物的数据暂时push到聊天记录的数组中展示出来，我就用了eventBus来实现送礼组件和聊天页面之间的数据传递。我们在礼物组件选择一个礼物时触发eventBus的 bus.$emit("listenGift...
vue中eventbus 多次触发的问题
weixin_33940102的博客
03-01 449
vue组件中使用bus来监听的时候回触发多次，解决办法， 就是在监听的组件的beforeDestroy钩子中 1 beforeDestroy () { 2 this.$bus.$off('add',this.handle) 3 }, https://www.cnblogs.com/xiaochongchong/p/8127148.html 转载...
vue中$EventBus被多次触发
AOOOOO李
08-15 528
vue中 enentBus被多次触发
vue中eventbus被多次触发（vue中使用eventbus踩过的坑）【bus.$on事件被多次绑定】...
weixin_30538029的博客
12-14 325
问题描述：只要页面没有强制刷新，存在组件切换，bus.$on方法会被多次绑定，造成事件多次触发 触发bus.$on中绑定的方法.png bus.$on多次绑定.png 解决办法：在每次调用方法前先解绑事件( bus.$off )，然后在重新绑定( bus.$on ) bus.$off("backUpLevel"); ...
在Uni中使用Vue的EventBus总线机制操作
11-19
创建完$EventBus后，就可以直接在页面中使用事件总线的方法来发送和接收事件了 第二种做法：封装事件总线 使用的时候直接引入就可以了 补充知识：vue里使用EventBus解决兄弟组件间的传递信息 ①初始化 import ...
详解vue 组件之间使用eventbus传值
01-21
当然，使用存储也是可以得，但是并非一定要缓存，当然在vue中有推荐了我们去使用vuex去数据交互，Vuex会让你的Vue代码足够灵活可控，把数据统一存入state, 只允许通过Actions触发Mutations修改。然而，有时候我们的...
vue eventbus和store解决router回退传值，并修改element tabs默认选中
qq_36306693的博客
02-16 521
1.配置值store变量值 export default { namespaced: true, state: { tab: '' }, mutations: { updateTab (state, tab) { state.tab = tab } } } 2.设置eventbus /** * 全局事件观察者 */ import Vue...
Vue事件总线（EventBus）使用指南：详细解析与实战应用
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-31 1万+
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
Vue组件通信中央事件总线实例
09-28
介绍Vue组件之间的通信方式，本资源主要是介绍中央事件总线这种模式，代码中详细示范了如何使用中央事件总线来通信
vue中EventBus的基本使用
wzuof的博客
10-14 3646
前言 vue组件中父子组件通信，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。两个页面没有任何引入和被引入关系，该如何通信？使用EventBus即可。 1.建立一个eventBus.ts(或者js文件) import Vue from 'vue' export default new Vue() 2.传递值的页面 import EventBus from "@/components/EventBus"; EventBus.$emit('sea
vue 组件之间使用eventbus传值
热门推荐
胡世林的博客
07-15 4万+
eventbus vue vue-cli 组件传值
EventBus使用及源码分析
lhp15575865420的博客
08-20 335
EventBus也可以称为事件总线，它主要用于组件间的通信，解耦发送者与接收者（订阅者）。比如activity和service之间的通信，可能我们会采用broadcast来通信，因为这样减少了耦合，但是需要引入一个broadcast，光代码量就提升很多。而如果用EventBus只需要在service里面发送事件，activity里面接收事件即可。下面说说基本使用。 基本使用 先导入依赖。co...
[Android]EventBus-来一趟快速公交初体验[下]
消失的天空
06-14 800
接着上文《[Android]EventBus-来一趟快速公交初体验[上]》，我们继续说说EventBus3.0的其他Point。 Subscriber index 因为EventBus3使用了 如@subscriber 这样的注解的方式来实现订阅方法的检索和调用，众所周知，这种方式是消耗性能的，所以这个版本的效率应该会比之前的版本慢一些（虽然我们感觉不到），然后，EventBus3的开
vue中使用eventBus遇到数据不更新的问题
u010007013的博客
04-25 8811
今天在项目的一个组件需要向兄弟组件传数据，所以想到了使用eventBus。 首先，我先建立了一个eventBus.js，代码如下： import Vue from 'vue' const eventBus = new Vue() export default eventBus 然后在需要往外传值的组件中引用eventBus.js： import eventBus from '@/assets/j...
vue 中使用eventbus
r_17703772792的博客
02-19 5513
公司的项目中应用了vuex,但是发现在commit的时候,消耗了100多毫秒的时间,所以研究下eventbus 父子组件通讯原则 为了提高组件的独立性和重用性,父组件会通过props向下传数据给子组件,当子组件又事情要告诉父组件时用通过$emit事件告诉父组件,如此确保每个组件都是独立在相对隔离的环境中运行,可以大幅度提高组件的可维护性 在<Vue组件通讯>一文有详细介绍过这...
vue中使用eventBus
凉兮的博客
06-04 622
vue中使用eventBus EventBus是消息传递的一种方式，基于一个消息中心，订阅和发布消息的模式，称为发布订阅者模式。 1.新建 eventBus.js import Vue from 'vue'; let bus = new Vue(); Vue.prototype.$eventBus = bus; export default bus; 2.在两个vue组件中引入 eventBus.js //eventBus.js为自己项目中对应的路径 import bus from '../uti
Vue——eventBus使用，重复触发
where_slr的博客
09-19 1995
之前写项目中遇到使用eventBus，兄弟组件之间传值写了个简单的demo测试总结一下 新建了一个Bus import Vue from "vue"; export default new Vue(); Send组件： <template> <div> <div> 我是发送数据的页面</div> <div class="...
vue中eventBus
最新发布
07-25
在Vue中，EventBus是一个全局事件总线，用于在组件之间进行通信。通过EventBus，我们可以在一个组件中触发事件，并在其他组件中监听和处理这些事件。引用\[1\]中的代码演示了如何在Vue中使用EventBus进行事件监听和移除。首先，我们需要导入EventBus，然后定义一个事件监听函数。使用EventBus.$on()方法来监听一个自定义事件，并将事件名称和监听函数作为参数传递进去。当事件被触发时，监听函数将被执行。要停止监听事件，可以使用EventBus.$off()方法，并传递事件名称和监听函数作为参数。这将移除指定事件的指定监听函数。引用\[2\]提到了在业务有反复操作的页面时，EventBus可能会触发多次事件，这可能会导致问题。为了解决这个问题，可以在Vue页面销毁时，同时移除EventBus的事件监听。引用\[3\]展示了在接收方组件中如何使用EventBus.$on()方法订阅自定义事件并处理其响应。在mounted钩子函数中，使用EventBus.$on()方法来订阅自定义事件，并将处理函数作为参数传递进去。当事件被触发时，处理函数将被执行。 #### 引用[.reference_title] - *1* *2* [vue - EventBus](https://blog.csdn.net/qq_39085060/article/details/104226440)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue中的Event Bus](https://blog.csdn.net/AlegFox/article/details/130282307)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值