vue父组件给子组件传值,子组件不渲染的原因及解决方法

父组件传递给子组件的数据,如果是一个复杂对象(例如一个数组或对象),那么子组件只会监听对象的引用而不是对象的内容。这意味着当对象的内容发生变化时,子组件不会更新。

解决:

1、在子组件使用 watch 监听 props传过来的值,如果发现改变,调用forceUpdate刷新视图。

复制代码
this.$forceUpdate()

2、父组件中声明一个布尔变量,数据发生变化后,切换一下变量状态,可刷新子组件视图。

3、数据发生变化后,在下面调用一下splice方法修改原数组长度(索引、截取长度都为0),数组不变,但视图可成功渲染。

复制代码
this.list.splice(0, 0)
相关推荐
CC码码2 分钟前
告别杂乱数字:用 Intl.NumberFormat 打造全球友好的前端体验
前端·javascript·面试
kandee11 分钟前
vscode混淆js文件的插件用法(jshaman)
javascript·ide·vscode
妮妮喔妮12 分钟前
Webpack和Vite优化的区别
前端·webpack·node.js
广州华水科技32 分钟前
单北斗GNSS在大坝形变监测中的应用与性能分析
前端
等风来不如迎风去38 分钟前
【web】页面透明、插入图片
前端
谢尔登41 分钟前
a 标签的跳转机制
前端·javascript·webpack·node.js
狂炫冰美式1 小时前
当硅基神明撞上人类的“叹息之墙”:距离证明哥德巴赫猜想,AI还有多远?
前端·算法·架构
毕设源码-邱学长1 小时前
【开题答辩全过程】以 基于Vue的爱心公益募捐平台的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
IT_陈寒1 小时前
Redis实战精要:5种高频使用场景与性能优化全解析|得物技术
前端·人工智能·后端
前端小白在前进1 小时前
力扣刷题:千位分割数
javascript·算法·leetcode