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

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

解决:

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

复制代码
this.$forceUpdate()

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

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

复制代码
this.list.splice(0, 0)
相关推荐
两点王爷21 分钟前
一个快速加载面和多面数据的html测试页面(可以导出geojson数据文件)
前端·html·gis
热爱前端的小张22 分钟前
第四章 接口和类型兼容性
前端
hunterandroid24 分钟前
[鸿蒙从零到一] HarmonyOS 资源管理与多语言适配实战
前端
用户693717500138429 分钟前
Claude Code终端日志Token占用实测:一个过滤器砍掉60%-90%
android·前端·后端
无人生还35 分钟前
第 1 篇:从 Vue3 到 React 的思维转变
前端·vue.js·react.js
就业发动机42 分钟前
我用 Tauri 做了一个约 1.5 MB 的开源屏幕标注工具:MarkerOn
vue.js·rust
爱分享的程序猿-Clark1 小时前
【前端分享】vue开发项目,如何实现 从A页面跳转到B页面,并传值!
前端·javascript·vue.js
冰暮流星1 小时前
javascript之String方法介绍
开发语言·javascript·ecmascript
breeze jiang2 小时前
从原生事件到 React 组件化:用状态驱动模型加载进度 UI
前端·react.js·ui
徐小夕2 小时前
花了3天,我写了一款开源AI公众号编辑器
前端·vue.js·github