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

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

解决:

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

复制代码
this.$forceUpdate()

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

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

复制代码
this.list.splice(0, 0)
相关推荐
小鱼儿亮亮12 分钟前
二、React基础精讲:编写TodoList、事件绑定、JSX语法、组件之间传值
前端·react.js
Mintopia14 分钟前
实时 AIGC:Web 端低延迟生成的技术难点与突破
前端·javascript·aigc
小鱼儿亮亮15 分钟前
五、Redux进阶:UI组件、容器组件、无状态组件、异步请求、Redux中间件:Redux-thunk、redux-saga,React-redux
前端·react.js
Mintopia15 分钟前
Next.js 性能优化双绝:Image 与 next/font 的底层修炼手册
前端·javascript·next.js
jingling55520 分钟前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法
小菜全22 分钟前
使用UniApp实现下拉框和表格组件页面
开发语言·前端·javascript·elementui·前端框架·html
三十_A27 分钟前
【工具】41K star!网页一键变桌面应用
前端·开源
wordbaby1 小时前
解锁时光机:用 React Hooks 轻松实现 Undo/Redo 功能
前端·react.js
呐谁吃饭了1 小时前
网络安全学习-6
前端
北辰alk1 小时前
深入剖析Redux中间件实现原理:从概念到源码
前端