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

最新推荐文章于 2023-06-09 16:56:08 发布

丸子妹

最新推荐文章于 2023-06-09 16:56:08 发布

阅读量566

点赞数

分类专栏：前段学习

前段学习专栏收录该内容

12 篇文章

订阅专栏

https://blog.youkuaiyun.com/chern1992/article/details/80392465

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

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

// 在B组件页面中添加以下语句，在组件beforeDestory的时候销毁。
  beforeDestroy () {
    bus.$off('get', this.myhandle)
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

丸子妹

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

chern1992的博客

05-21

8526

一开始的需求是这样子的，我为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页面会自动跳转到页面B，同时我希望将页面A上的某一些参数携带过去给页面B。然后我就想，这不就是不同组件之间的数据传递问题而已吗？直接用bus 巴士事件来传递数据不就行了吗。于是，我就很愉快地进行了。关于vue中的eventbus的使用，我之前在一篇vue中的数据传递中有提到过。先给你们看一...

Vue实战指南：Vue中EventBus的使用方法

09-17

3458

在构建复杂前端应用时，组件间的通信是必不可少的一环。Vue.js 提供了多种方式来实现这一目标，包括父子组件间的props传递、自定义事件、Vuex等。然而，在某些场景下，如果多个无直接父子关系的组件需要进行通信，则可以采用全局事件总线（Global EventBus）的方式。本文将详细介绍如何在Vue项目中实现并利用EventBus来促进组件间通信，帮助你更高效地组织和管理应用逻辑。

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

vue中eventbus被多次触发

weixin_34059951的博客

05-24

477

我们项目需求大概是这样的，有一个好友列表，每点击进入和一个好友聊天时可以送礼物给对方，因为页面的其他地方也要用到送礼的功能，我就把送礼的模块单独抽取出来成一个组件，当选择了一个礼物送给对方时，礼物的数据暂时push到聊天记录的数组中展示出来，我就用了eventBus来实现送礼组件和聊天页面之间的数据传递。我们在礼物组件选择一个礼物时触发eventBus的 bus.$emit("listenGift...

vue中eventbus 多次触发的问题

weixin_33940102的博客

03-01

482

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

659

vue中 enentBus被多次触发

vue中eventbus被多次触发（vue中使用eventbus踩过的坑）【bus.$on事件被多次绑定】...

weixin_30538029的博客

12-14

383

问题描述：只要页面没有强制刷新，存在组件切换，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.$on多次触发的问题

qq_59224656的博客

05-05

1436

eventBus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件被注销，但是原来vue组件向Bus容器中添加的事件监听器并不会被移除。因此，当下次进入这个vue组件对应的页面时，执行到eventBus.$on时，又会向Bus容器中添加一个重复的事件监听器，以此类推，导致Bus容器中有很多个一模一样的事件监听器，从而导致事件只被触发一次，但是回调函数被执行多次的现象。

Vue组件通信中央事件总线实例

09-28

介绍Vue组件之间的通信方式，本资源主要是介绍中央事件总线这种模式，代码中详细示范了如何使用中央事件总线来通信

事件总线（EventBus）,父子、兄弟组件间通信，一个页面调用另一个页面的方法 & 使用eventbus遇到的问题（多次触发、第一次不触发）

金乌的博客

11-25

4507

组件通信时，有时两个组件之间毫无关系，或者他们之间的结构复杂，这时就要用到 vue 中的事件总线 EventBus的概念。EventBus 又称为事件总线。EventBus的用途：1.解决一个页面调用另一个页面的方法2.解决父子组件、兄弟组件间的通信。

vue eventBus 使用

小耳朵晨晨

03-10

838

主页是helloWorld: a.vue 和b.vue是两个兄弟模块实现功能两个兄弟模块都能使用helloWord的num 。新建一个event-bus.js import Vue from 'vue' export const EventBus = new Vue() 在main.js中创建实例（添加一句） Vue.prototype.$EventBus = new Vue(); helloWorld页面 <template> <div class="h

Vue3 实现Event-Bus事件总线（mitt插件）

黄彪博客

06-09

2933

Vue3 没有像Vue2那样创建一个Vue实例作为事件传递的对象( 参考。两个属性下面引入的自定义的声明文件。

vue eventbus和store解决router回退传值，并修改element tabs默认选中

qq_36306693的博客

02-16

683

1.配置值store变量值 export default { namespaced: true, state: { tab: '' }, mutations: { updateTab (state, tab) { state.tab = tab } } } 2.设置eventbus /** * 全局事件观察者 */ import Vue...

使用eventBus.$on事件重复执行问题

qq_24612793的博客

03-26

3313

一：问题在写移动账户注册的时候有一个验证会从注册页面A跳转到另一个B去验证，验证完之后拿到验证码再次回到页面A并且传回拿到的结果再请求接口，结果跳回A的时候发现接口第一次请求一次，第二次求情两次，以此类推二：原因只要页面没有强制刷新，存在组件切换，eventBus.$on方法会被多次绑定，造成事件多次触发，这个跟vue寿命周期有关，eventBus.$on方法需要手动清除三：解决方...

vue中$bus遇到的问题

live_loves的博客

09-23

788

最近在做项目的过程中发现有页页面接口会多次调用，找了很久才发现是子组件向父组件传值引起的。上解决办法：（1）方法一：在调用之前先将事件销毁，否则会重复叠加 this.$EventBus.$off(event).$on(event, (data) => { // event 事件名称 // data 传过来的数据 }); （2）方法二：在生命周期里面进行销毁 beforDestroy（）{ this.$EventBus.$off(event);

Vue——eventBus使用，重复触发

where_slr的博客

09-19

2201

之前写项目中遇到使用eventBus，兄弟组件之间传值写了个简单的demo测试总结一下新建了一个Bus import Vue from "vue"; export default new Vue(); Send组件： <template> <div> <div> 我是发送数据的页面</div> <div class="...

vue中周期函数被多次触发（vue中使用eventbus踩过的坑）

莫普斯

06-22

4344

感谢作者的分享一开始的需求是这样子的，我为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页面会自动跳转到页面B，同时我希望将页面A上的某一些参数携带过去给页面B。（我知道，小参数的时候可以通过路由的params或者query去传参数，或者大型数据可以用vuex来处理，很遗憾我到现在还没有做很大型的项目，所以还没有用过vuex，接下来会学习一下。）作者：Kather...