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

最新推荐文章于 2024-07-10 11:21:49 发布
最新推荐文章于 2024-07-10 11:21:49 发布
阅读量4.3k 收藏
点赞数
分类专栏： vue 文章标签： 周期函数多次触发

感谢作者的分享

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


作者：Katherine的小世界
链接：https://www.jianshu.com/p/fde85549e3b0
來源：简书

莫普斯
关注
专栏目录
解决Vue中事件（eventBus）$on()多次触发问题
weixin_44635214的博客
09-29 2057
项目中使用了事件总线eventBus来进行两个组件间的通信， 使用方法是是建立eventBus.js文件，暴露一个空的Vue实例，如下： import Vue from 'vue' export default new Vue() 在需要通信的两个组件中分别import import eventBus from "common/utils/eventBus"; 然后就可以通过emit、on进行通信：如下： //一个组件中发射 eventBus .$emit('open_dialog',true); /
vue3 mitt事件重复触发
Liyan_Yanna的博客
06-07 3074
子元素中发起的事件 setup(props) { onMounted(() => { bus.emit("add", {value: '测试'}) }) return {} } 父元素中监听 import bus from "@/utils/mitt"; ... setup(props) { var i = 0; bus.on('add', (d
vue组件重复使用问题_游戏活动中可重复使用的Vue组件
cuk5340的博客
07-27 668
vue组件重复使用问题 视觉游戏 (vue-games) A npm package which allows you to include components with games in your vue application. For now it only have a hangman game. 一个npm软件包，可让您在vue应用程序中包含游戏组件。 目前，它只有一个子手游戏。 ...
Vue3中使用watch监听数据变化如何避免频繁触发
最新发布
小磊很烦bug的博客
07-10 604
对于方式1,因为子表单的数据源是formData下的对象属性，必须采取深层监听，因此不采取。对于方式3，因为被该改变的值也是子表单数据源formData的一个对象属性，所以不采取。子表单数据集formData。
解决 vue3 使用mitt（发布订阅库）时，多次触发事件订阅问题
学海无涯，回头是岸
12-08 1842
在日常vue项目开发中，有时会用到mitt（前身事件总线mittBus）进行事件传递，然而使用经常就是mitt().emit() , mitt().on 就结束了，未考虑到取消订阅事件，这就导致同个实例上绑定了多个相同的订阅事件，导致触发多次
vue中一个页面引入多个相同组件重复请求的问题？
qq_43631129的博客
11-15 2276
vue中一个页面引入多个相同组件重复请求的问题？
vue 同一页面多次引用同一组件
热门推荐
ting0712的博客
11-03 1万+
vue elementui同一页面多次引用同一组件(导致 组件只显示一个,且数据覆盖) 1:需求是在同一页面有两个表格都带有分页功能,于是选择了将分页抽取成组件,一个页面调了两次组件; 2:需要往子组件里传不同的接口路径,在子组件里去写方法请求,将返回结果传给父组件,父组件拿到结果赋给表格data值,显示列表数据; 3:解决问题的关键: //1.-----页面调用子组件,实例化两个 //第一处调用子组件 <pagination @get-list="getpagequery" :...
Vue中使用的EventBus有生命周期
10-18
总结来说，在Vue项目中使用EventBus时，应该非常小心地管理事件的监听和清理，以避免潜在的内存泄漏问题。如果可以通过组件的生命周期钩子来自动处理这些事情，将大大减轻开发者的负担，并提高代码的健壮性和可维护...
详解vue 组件之间使用eventbus传值
08-29
例如，我们可以在 mounted 生命周期函数中抛出事件，而在其他组件中使用 created 生命周期函数来监听该事件。 下面是一个使用 EventBus 传递数据的示例代码： transimissionone.vue（发送事件的文件） ```html ...
vue 使用eventBus实现同级组件的通讯
08-27
我们可以使用 Vue 的构造函数来创建一个新的 Vue 实例，并将其用作 EventBus。 let eventBus = new Vue() 2. 绑定事件 接下来，我们需要在组件中绑定事件。我们可以使用 `$on` 方法来绑定事件。 created() { ...
vue使用watch 观察路由变化，重新获取内容
08-31
本篇文章主要介绍了vue使用watch 观察路由变化，重新获取内容 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
Vue组件通信eventbus封装-构造函数方式.zip
08-02
此外，为了提高代码的可读性和可维护性，还可以在EventBus中添加一些额外的辅助方法，例如命名空间管理、事件类型检查等，以便更好地管理和控制事件的发布与订阅。 总的来说，这个压缩包中的`EventBus2.js`提供了一...
vue 一个页面多次使用同一个组件,传值问题
小姐姐
11-30 4780
a
watch监听路由重复加载
u013995513的博客
11-28 900
watch监听路由重复加载 项目要求，列表页跳转到一个内容页，每个打开的内容页之间切换还要做到点击就刷新数据， 之前的解决方式就是用watch去监听路由，但是监听路由后，第一次进入无效，关闭后打开就会成倍的去请求watch里面的方法。应该是框架的原因，一直有缓存的router的信息在，所以还会去请求相同的东西！归根结底就是vue的生命周期不够了解 解决办法使用“导航守卫” //next()是必须加的 beforeRouteEnter (to, from, next) { console.
vue项目created()被调用多次的坑
BHSZZY的博客
12-05 8376
最近碰到一个奇怪的生产问题： 正常情况下、前端页面会请求一次后台、然后后台返回信息（或）、前端展示； 后台用aop+redis写了一个防止重复调用的方法，如果5s内同一个用户重复调用同一个接口，就返回，前端就会展示这个。但是，某几个页面，前端总是会重复调用后端2次，导致用户只能看到，无法确认本次操作是成功还是失败，严重影响了用户的正常使用。（虽然是处理成功，但是显示不出来…）一开始还怀疑是不是后端的问题，排查了半天，终于锁定了，是前端的问题，vue项目中的方法被调用了。继续排查，发现从正常页面跳转到这个问题
关于Vue组件复用问题的描述与解决
m0_61781282的博客
09-30 2024
关于Vue组件复用问题的描述与解决
mitt应用 及 mitt触发多次接受函数
zhang_zan
08-08 2688
vue3中使用bus中央事件， mitt的使用，解决mit
【Vue】Vue 生命周期以及生命周期函数
weixin_43790653的博客
04-05 1488
【Vue】Vue 生命周期以及生命周期函数
Vue组件的三种调用方式
weixin_33730836的博客
01-14 3026
最近在写fj-service-system的时候，遇到了一些问题。那就是我有些组件，比如Dialog、Message这样的组件，是引入三方组件库，比如element-ui这样的，还是自己实现一个？虽然它们有按需引入的功能，但是整体风格和我的整个系统不搭。于是就可以考虑自己手动实现这些简单的组件了。 通常我们看Vue的一些文章的时候，我们能看到的通常是讲Vue单文件组件化开发页面的。单一组件开发的文...
Vue组件间EventBus传递值详解
4. 导入和使用Event Bus：在需要用到Event Bus的组件中，需要导入并使用`eventBus`变量，确保在整个组件的生命周期内都能访问到它。 5. 代码示例： - 在`transimissionone.vue`的模板部分添加按钮，点击时触发事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值