uniapp中父组件传参到子组件页面渲染不生效问题处理实战记录

上篇文件介绍了,父组件数据更新正常但是页面渲染不生效的问题,详情可以看下:uniapp中父组件数组更新后与页面渲染数组不一致实战记录

本文在此基础上由于新增需求衍生出新的问题.本文只记录一下解决思路.

下面说下新增需求方便理解场景:

商品信息设置中添加抽奖概率设置,默认概率相同,页面如下:

可以切换成自定义.显示概率输入框,页面如下:

处理逻辑中给goodsList的每个详情中根据业务场景添加了对应属性:

c 复制代码
"sameRate": 1, // 1.概率相同;2.自定义
"prizeRate": 0,  // sameRate为2时有效

子组件中sameRate为1显示相同,sameRate为2时显示概率输入框.

出现问题 :

显示设置radio切换逻辑中添加了goodsList中每个对象属性sameRate进行变更的处理逻辑.控制台发现goodsList数据变化显示正常.goodsList中每个对象属性sameRate会随着显示设置切换正常变化,统一为1或是统一为2.但是子组件显示的三个商品信息概率一栏中只会显示相同(sameRate为1),无法跟随显示设置动态变化.

问题原因:

这里涉及到父页面数据变换后如何让子组件重新渲染的问题,一般来讲父组件中数据变换通过props传递到子组件进行重新渲染.我这边出现问题的原因是子组件采用了自定义key.页面初始化后已经是固定值.vue中默认子组件中唯一key变化后才会重新渲染子组件.所以处理办法是在radio切换逻辑中变更goodsList中每个对象属性的key值.

相关推荐
today喝咖啡了吗4 分钟前
uniapp,Anroid10+版本如何保存图片并删除
uni-app
presenttttt18 分钟前
用Python和OpenCV从零搭建一个完整的双目视觉系统(四)
开发语言·python·opencv·计算机视觉
每日出拳老爷子24 分钟前
[C#] 使用TextBox换行失败的原因与解决方案:换用RichTextBox的实战经验
开发语言·c#
半桔27 分钟前
【Linux手册】从接口到管理:Linux文件系统的核心操作指南
android·java·linux·开发语言·面试·系统架构
nightunderblackcat36 分钟前
新手向:实现ATM模拟系统
java·开发语言·spring boot·spring cloud·tomcat·maven·intellij-idea
开开心心就好38 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
笑衬人心。1 小时前
Java 17 新特性笔记
java·开发语言·笔记
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
为风而战2 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
序属秋秋秋2 小时前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习