vue-bus， 组件内接收的事件多次触发的原因

最新推荐文章于 2022-09-05 22:51:44 发布
最新推荐文章于 2022-09-05 22:51:44 发布
阅读量850 收藏 1
点赞数 1
文章标签： vue-bus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cherrylindan/article/details/102724989
版权

起因：今天做一个项目， 首先有三个组件， 分别是A,B,C， B是公用组件， A，C分别是两个页面的组件， 在A页面bus传值正常， 但是在C页面传值的时候时间触发一次， $on接收的事件就会叠加触发， 后来才知道， bus传值之后要进行销毁， 尤其是跳转页面进行使用的时候。废话不说贴代码

如果在钩子函数created进行接收bus传递的值的话， 好像页面怎么点击都不会触发， 在mounted进行接收值才会正常， 具体原因还没找到。。。

cherryld
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Bus事件中心 多次触发的坑
@梢的博客
04-22 942
Vue 中事件处理 在子组件和父组件中 父组件可以通过props向下传递数据，子组件则可以用 emit向上传递。但在两个没有嵌套关系的组件中或者想指定触发某个操作时则可以用 Bus 事件中心。 现在我有这样一个组件 List 组件 <template> <div class="list"> <tabs :list="tabList" &lt...
vue3 onMounted 反复执行问题
热门推荐
qq_42027690的博客
07-15 1万+
vue3 onMounted 反复执行问题
Vue的生命周期mounted(Vue3的声明周期onMounted)执行多次问题
泛知亦学
07-12 6298
Vue的生命周期mounted(Vue3的声明周期onMounted)执行多次问题
vue 在组件中绑定的监听事件触发多次原因
weixin_44249754的博客
10-11 2372
在mounted生命周期中，使用 document.addEventListener("click", event => { console.log("click-listener") }) 如果组件在父组件中多次引用，会导致多次执行上面这段代码，触发点击事件时也会执行多次。 找到执行多次的原因就好解决了 ...
VUE中使用bus传值时，接收页面多次触发接收方法的问题
happygirlnan的专栏
07-23 2434
使用bus在兄弟组件间传递值时，可能会有多个组件监听通过bus传出的值。比如： 组件A的一个按钮事件中有这么一句：bus.$emit('getUnitId',data);组件B、C、D中监听接收。 在组件B中接收的代码如下 mounted(){ bus.$on("getUnitId", function(data){ console.log(data); ...
vue bus全局事件中心简单Demo详解
11-30
关于Vue Bus可能出现的问题，一是由于Vue组件的复用，可能会导致同一个事件被多次注册，造成事件处理的混乱。解决办法是在组件销毁时正确地移除监听器。二是页面路由切换时，未被正确清理的bus事件依然存在，这可能...
解决vue bus.$emit触发第一次$on监听不到问题
11-20
在Vue.js应用中，事件总线（Event Bus）是一种常见的组件间通信方式，它通过创建一个新的Vue实例来充当事件中心，允许组件之间发送和接收自定义事件。在标题提到的问题中，开发者遇到了`bus.$emit`触发的事件在`bus....
Vue2.0学习之详解Vue 组件及父子组件通信
08-28
2. **事件总线（Event Bus）**：非父子关系的组件间通信可以通过创建一个全局Vue实例作为事件总线，通过`$on`监听事件，`$emit`触发事件实现。 3. **Vuex状态管理**：对于大型项目，可以使用Vuex来集中管理应用的...
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
11-20
需要注意的是，使用bus进行组件间通信虽然方便，但可能导致数据同步问题，特别是在组件被多次创建和销毁时，监听器可能被重复触发。为避免这种问题，可以考虑使用`once`修饰符或在`beforeDestroy`中移除监听器，以...
vue组件
01-20
Vue组件的复用性体现在可以多次使用同一个组件，而不会相互影响。嵌套组件则允许在一个组件内部使用其他组件，形成复杂的UI结构。 **注意事项** 1. 避免在组件内直接修改props，以保持数据流动的单向性。 2. 使用...
vue中eventbus被多次触发以及踩过的坑
08-28
主要介绍了vue中eventbus被多次触发以及踩过的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3.0使用心得
qq_42951723的博客
03-13 1349
vue3.0使用心得
vue 刷新网页onMounted会执行多次
马娟的博客
05-18 2873
修改前：<router-view :key="new Date()" /> 修改后：<router-view/>
Vue路由拦截问题
qq_43750656的博客
08-03 1423
第三个参数next是个回调函数，如果直接调用了next(),则表示放行了。如果不允许放行，想重定向到其他路由，则可以在next函数中，传递路由参数，如。next(‘/login’)，此时需要注意的是 /login路由的相关逻辑也会被next().否则会发生无限重定向问题。next(参数) : 此时是重新跳转，而重新跳转又会被beforeEach拦截到。next() : 路由跳转完成，进入to.path对应的路由页面。路由拦截的函数结构体。...
vue生命周期执行两次的debug之路
qq_36545095的博客
12-28 5420
版本：vue3.2 说明：本文仅代表其中一种可能的情况，仅作为参考 1.bug最初的地方(使用了setup语法糖) 网上查找资料，v-if可能会导致onMounted执行两次。 计划方案： a.v-if替换为v-show,未解决； b.onMounted换成其他生命周期，比如created,仍未解决。 2.偶然发现整个setup语法糖内都会执行两次，如下： 查看编译后源码发现，setup语法糖会编译为setup()，即setup()执行了两次。 3.考虑可能父组件中存在v-if..
vue3子组件通过emit反馈给父组件，会触发两次。
曹先森的博客
10-25 2963
使用 emit 需要 先注册 在 setup 中 使用emit的时候如果不注册会给父组件反馈两次。 详情如下 vue.component('ls-unit', { props: { selectedItems: { default: {} } }, emits: ['change'], // 这里需要先注册 setup(props, { emit })
Vue3 中 使用watch 监听路由中的值 会执行多次
qq_38758763的博客
06-24 3451
Vue3 中 使用watch 监听路由中的值 会执行多次
【前端学习 - Vue (3) 生命周期】
weixin_60364883的博客
09-05 3890
生命周期
解决vue3使用watch监控多个变量会重复执行方法的问题
weixin_45743541的博客
06-30 2616
vue3，watch
vue-draggable-resizable取消触发组件事件的几种方法
最新发布
04-09
Vue-draggable-resizable取消触发组件事件可以通过以下几种方法实现： 1. 在组件元素上添加 v-if 或 v-show 来动态禁用组件。 2. 通过 v-on 的修饰符 .stop 或者 .prevent 来阻止事件冒泡或者禁止默认行为。 3. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值