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

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

解决:

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

复制代码
this.$forceUpdate()

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

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

复制代码
this.list.splice(0, 0)
相关推荐
打小就很皮...12 小时前
html2canvas + jsPDF 生成 PDF 的踩坑与解决方案总结
前端·pdf
全栈前端老曹12 小时前
【前端地图】多地图平台适配方案——高德、百度、腾讯、Google Maps SDK 差异对比、封装统一地图接口
前端·javascript·百度·dubbo·wgs84·gcj-02·bd09
笑虾12 小时前
Win10 修改注册表 让鼠标悬停PNG上时 tip 始终显示分辨率
开发语言·javascript·ecmascript
xiaogg367813 小时前
spring oauth2 单点登录
java·vue.js·spring
雾岛听风69113 小时前
JavaScript基础语法速查手册
开发语言·前端·javascript
遇见~未来13 小时前
第三篇_现代布局_从弹性到网格
前端·css3
前端那点事13 小时前
Vue前端SEO优化全攻略(实操落地版,新手也能上手)
前端·vue.js
Dxy123931021613 小时前
HTML 如何使用 SVG 画曲线
前端·算法·html
用户23678298016813 小时前
从零实现 GIF 制作工具:LZW 压缩与 Median Cut 色彩量化
前端·javascript
hahaha 1hhh13 小时前
中文乱码 ubuntu autodl
linux·运维·前端