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

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

解决:

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

复制代码
this.$forceUpdate()

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

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

复制代码
this.list.splice(0, 0)
相关推荐
C_心欲无痕20 小时前
前端如何实现 [记住密码] 功能
前端
qq_316837751 天前
uni.chooseMedia 读取base64 或 二进制
开发语言·前端·javascript
Zoey的笔记本1 天前
2026告别僵化工作流:支持自定义字段的看板工具选型与部署指南
大数据·前端·数据库
小二·1 天前
Python Web 开发进阶实战:混沌工程初探 —— 主动注入故障,构建高韧性系统
开发语言·前端·python
gis开发1 天前
【无标题】
java·前端·javascript
小二·1 天前
Python Web 开发进阶实战:低代码平台集成 —— 可视化表单构建器 + 工作流引擎实战
前端·python·低代码
慧一居士1 天前
Vite 中配置环境变量方法及完整示例
前端·vue.js
梦因you而美1 天前
XPath 元素定位全方位技术文档
javascript·xpath·xpath定位
天意pt1 天前
Idempotency 幂等性 - 点赞和投票功能
前端·javascript·express
weixin_427771611 天前
cursor 智能commit
前端