vue父子组件传值不能实时更新的解决方法

寻技术 VUE 2023年07月12日 105

最近做项目,遇到个大坑,这会爬出来了,写个总结,避免下次掉坑。

vue父子组件传值不能实时更新问题,父组件将值传给了子组件,但子组件显示的值还是原来的初始值,并没有实时更新,为什么会出现这种问题呢?

出现这个问题,可能有以下两个原因:

一、 父组件没有把值传过去,子组件没有获取到最新的值。

二、子组件接收到最新的值了,但是没有实时渲染到视图上。

如果是第一种情况很简单,核对传的参数,确保把最新的值传过去就可以了。

若是第二种情况,稍微有些麻烦,但也可以解决,主要有两种解决方案:

① 利用v-if的重新渲染机制,获取到值之后,将子组件重新渲染一遍。

② 利用watch监听数据,若是数据变化,调用视图渲染方法。

下面,结合项目的实际情况,具体分析这两种方法。

在项目中,将erchart中的生成仪表盘的数据封装了一个子组件,父组件中传给仪表盘一个初始值,后续,调用后台接口返回最新的数据传给这个仪表盘组件的之后,发现仪表盘中的数据并没有实时的更新。仪表盘如下图:
————————————————
版权声明:本文为CSDN博主「木木木华」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/catascdd/article/details/129065973

原文地址:https://blog.csdn.net/catascdd/article/details/129065973
关闭

用微信“扫一扫”