mpvue解决同一页面组件反复进入数据被覆盖的问题

最新推荐文章于 2023-10-20 15:31:05 发布
最新推荐文章于 2023-10-20 15:31:05 发布
阅读量5k 收藏 1
点赞数
分类专栏： 前端 前端常用开发记录 文章标签： 微信小程序 mpvue 页面栈
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39168678/article/details/84391272
版权
在mpvue中，同一页面组件反复进入会导致数据覆盖，因为它们共用一套vm。解决方法是在每次跳转时将页面数据push到栈中，回退时弹出并恢复数据，确保页面栈和数据栈同步。当页面栈达到上限时，使用wx.redirectTo关闭旧页面。此方案适用于微信小程序开发。
摘要由CSDN通过智能技术生成

问题当同一个页面组件被反复进入时由于在mpvue中他们用的是一套vm，所以后面渲染的数据就会将前面页面的数据覆盖，这样在我们回退时就不会有以前页面的记录，一直会是最后一张页面的记录
原因
在这里插入图片描述

如图所示，在页面组件被created 此后，无论在小程序内该页面被关闭被隐藏被开启，该页面组件都不会被销毁，一直是在不停的修改同一个vue实例的data数据

思路每次当我们对同一页面组件进行跳转的时候将该页面的数据this.$data push进数据栈中，当在该页面组件执行回退事件unload是将最后放入的数据弹出，也就是前一个页面的数据，再将数据栈中的最后一个数据复制给this.data 对象。这样数据栈中数据的数量将会等于小程序页面栈中该页面组件的数量，也等于该页面组件执行回退事件的次数，当所有的回退事件执行完毕，数据栈也将被清空
效果
跳转压入
在这里插入图片描述

回退弹出当页面栈中该页面组件全部回退完时数据栈也被清空

最低0.47元/天 解锁文章
白马湖小龙王
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue一个页面中复用同一个echarts组件的问题
01-19
因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图： 我需要这样一个饼图，并且接下来在很多次地方要用到。 直接复制官网的代码，再改改数据，需要用的时候直接拿来用。 但是接下来出现了一个问题：如果我在同一个页面多次使用这个组件，图表将不能正常显示。分析了一下， echarts通过id获取对象 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById(‘main’)); 当封装为组件使用的时候，id固定，同一个页面多次出现相同id，所以不能正常显示。 所以想出来以下解决方
vue 组件多开，数据被覆盖问题排查及解决方案
Yseventeen
06-21 3116
vue-route详情页面多开时，前面的页面数据被新开的页面数据覆盖了。详情页面的路由，使用动态路由匹配。
vue 复用组件时出现的数据被覆盖
lml_little的博客
10-11 667
复用组件，同一组件 v-on 受影响
vue中复用组件时出现的数据被覆盖问题~已解决
weixin_43109722的博客
10-22 5894
vue中复用组件时出现的数据被覆盖的问题~已解决 项目需要，写了一个能够复用的Cascader 组件，偶然间发现了一个久远的bug… 我此时的Cascader 组件并没有加懒加载。 demo复现： 在一个页面中放入两个一模一样的组件，第一个组件始终没有数据，然而第二个时有数据展现的： 第二个组件明明是有数据的，可偏偏第一个没有； 代码粘上： <el-cascader :style="{width: width}" ref="cascader" :value="value" :options
基于mpvue的简单弹窗组件mptoast使用详解
10-16
基于mpvue的简单弹窗组件mptoast使用详解主要涉及了在mpvue环境下实现一个轻量级的弹窗组件，其特性包括轻量、配置简便、减少冗余、使用简单和可定制性强。为了更深入地理解和掌握如何在项目中运用mptoast组件，以下...
基于mpvue的简单弹窗组件mptoast
03-29
使用简单 除了必须的在page页面对组件import，注册，和html引入（这些麻烦的东西由于mpvue不支持的原因，暂时无法做到优化），其他的使用只需一行简单的代码 this.$mptoast('提示消息‘)即可实现弹窗  可定制性强 ...
详解如何搭建mpvue框架搭配vant组件库的小程序项目
10-16
在本文中，我们将深入探讨如何搭建一个基于mpvue框架并结合vant组件库的小程序项目。首先，让我们了解 vant 组件库。Vant是由有赞公司开发的轻量级、可靠的移动端Vue小程序组件库，它提供了丰富的高质量组件，帮助...
mpvue跳转页面及注意事项
10-18
本文将详细介绍MPVue中的页面跳转方法和需要注意的关键点，以帮助开发者更顺利地进行开发。 首先，让我们来看看MPVue的页面跳转。在MPVue中，有两种主要的页面跳转方式： 1. **普通跳转（navigateTo）**：适用于从...
mpvue 单文件页面配置详解
10-17
**mpvue 单文件页面配置详解** mpvue 是一个基于 Vue.js 的小程序开发框架，它为开发者提供了在 Vue.js 开发环境下构建微信小程序的能力。在传统的 mpvue 项目中，一个页面通常由三个文件组成：`index.vue`（页面...
解决vue同一slot在组件中渲染多次的问题
12-10
Q：今天写公共组件的时候碰到一个奇葩的情况，slot内部需要再次调用slot,这就会导致同一slot在组件中渲染多次引发的bug A：把把父组件需要传入的dom结构作为props属性传递给slotRender,保证出来的dom结构不相同（尽管它们都是同一vnode渲染出来的） 定义一个渲染slot的组件 子公共组件调用 父公共组件调用 以上这篇解决vue同一slot在组件中渲染多次的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Vue中多个子组件更新同一数据覆盖前一数据问题
m0_61135864的博客
10-25 2450
当我们在一个组件中 有多个子组件对同一接口 不同数据进行更改时 我遇到了 再更新最后一个组件 会把之前跟新的数据覆盖的情况 首先 是打开这一父组件时 三个子组件同时发送ajax请求 当我们在更新第一个子组件内容后 想切换到另一个子组件更新另外的内容时 第一个子组件修改后数据样子 修改第二个子组件的时候 我们修改了入职时间 但是我们跟改的名字又变回去了 这是因为我们在打开父组件时 他们同时发送请求获取数据 当我们...
多个html使用同一个数据,vue 自定义组件被同一个页面多次调用，数据被覆盖
weixin_39554170的博客
06-09 1229
我自己写了一个组件，echarts里面的柱状图，数据与图表名字是动态的，在column.vue中写了props:{column:{text:{type:String,default:""},series: [Object],},},mounted(){//省略一部分代码this.myChart.setOption({series:this.column.series})}之后在charts.vue...
vue中同一个页面多次复用同一个组件的相互干扰问题
weixin_47097870的博客
02-23 1万+
vue中同一个页面多次复用同一个组件的相互干扰问题
vue 同一页面多次引用同一组件
热门推荐
ting0712的博客
11-03 1万+
vue elementui同一页面多次引用同一组件(导致 组件只显示一个,且数据覆盖) 1:需求是在同一页面有两个表格都带有分页功能,于是选择了将分页抽取成组件,一个页面调了两次组件; 2:需要往子组件里传不同的接口路径,在子组件里去写方法请求,将返回结果传给父组件,父组件拿到结果赋给表格data值,显示列表数据; 3:解决问题的关键: //1.-----页面调用子组件,实例化两个 //第一处调用子组件 <pagination @get-list="getpagequery" :...
【Vue】同一个页面多次复用同一个组件数据相互干扰问题
qq_45677671的博客
10-13 4028
同一个页面多次复用同一个组件数据相互干扰问题
mpvue 多层v-for嵌套报错
豆。的博客
03-13 761
问题 在使用mpvue开发小程序时，嵌套使用v-for循环，没用到index索引，报错： 同一组件内嵌套的 v-for 不能连续使用相同的索引,目前为: index,index 原因 在mpvue中，v-for如果不定义index字段，默认就是index，多层v-for嵌套时候就会报这个错误，自己定义一下每一层嵌套的v-for的index字段就可以了 解决方法 重新定义第一个或者第二个for循环中...
vue的v-for中循环修改变量（this.xxx）的给子组件传值覆盖重复的问题
最新发布
HD243608836的博客
10-20 974
vue的v-for是最后统一调用给子组件传值，而不是每次执行就调用传值一次！所以变量会在被传值到子组件之前，会被一直修改 list.length 次。而底层逻辑应该是就是“浅拷贝”变量，即引用地址都是指向那同一个地址。使用v-for，其中需要根据不同的item修改某个变量(this.xxx)，然后向子组件中传值，但是发现传到子组件中的。我们循环qsList，其中是我自定义的一个组件，想向该子组件中传值。每次都是新的局部变量。
vue中封装Echart组件被同一个页面多次调用，数据被覆盖问题解决办法-ref
JackieDYH的博客
09-01 2243
大概率是echarts init有问题，是不是用class或id选择器选择元素来init了,改用ref即可 多次调用数据会发生覆盖 <divid="cate"></div> this.cake = echarts.init(document.getElementById("cate")); 正确封装 <divid="cate"ref="ref_cate"></div> this.cate=this.$echarts.init...
【微信小程序】组件生命周期
tscn1的博客
09-17 420
组件的生命周期 主要的三个函数： created 组件实例被创建好触发，组件在调用Component里的定义的数据data来实例化数据， 此时不能使用setData attached 组件初始化完毕，进入页面节点时被触发。几乎所有的初始化工作都在这里完成。 detached 当页面退出时，页面中如果还有节点树，次函数被触发 定义生命周期的方法 可以直接写在Component构造器的第一级参数中，但是不建议。 小程序在2.2.3期，生命周期函数的位置建议写在lifetimes中，优先级要高于第一级
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值