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

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

解决:

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

复制代码
this.$forceUpdate()

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

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

复制代码
this.list.splice(0, 0)
相关推荐
陈奕迅本讯几秒前
前端-Vue2组件化编程
前端·javascript·vue.js
T - mars2 分钟前
python爬虫:喜马拉雅案例(破解sign值)
javascript·爬虫·python
十五_在努力2 分钟前
参透 JavaScript —— 异步编程与Promise
前端·javascript·promise
顾林海4 分钟前
Flutter 图片组件全面解析:从基础加载到高级应用
android·前端·flutter
背书包的甜瓜6 分钟前
使用sass 实现px转vh或vw,适配适老化时,在设计图字体大小的基础上,增加3px(可配置),
前端·css·sass
十五_在努力7 分钟前
参透 JavaScript —— 图解 Event Loop 事件循环
前端·javascript
十五_在努力13 分钟前
参透JavaScript —— 判断数据类型的四种方式
前端·javascript
依辰20 分钟前
小程序自动化构建与版本管理方案优化
前端·javascript·微信小程序
Geoffwo20 分钟前
取消echarts地图悬浮时默认黄色高亮
前端·javascript·echarts
我是谁谁21 分钟前
Canvas 高级应用与实战项目<3>
javascript·css·canvas