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

本文介绍了在Vue中遇到父子组件传值无法实时更新的问题及其解决办法。内容包括检查父组件是否正确传递最新值,以及在子组件中利用v-if重新渲染和watch监听数据的策略。对于多个子组件共用一个属性进行重新渲染的问题,文章提出了使用watch监听配合this.$nextTick()来确保数据更新的正确性。

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

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

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

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

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

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

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

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

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

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

在项目中,将erchart中的生成仪表盘的数据封装了一个子组件,父组件中传给仪表盘一个初始值,后续,调用后台接口返回最新的数据传给这个仪表盘组件的之后,发现仪表盘中的数据并没有实时的更新。仪表盘如下图:

首先,利用第①种方法,利用v-if渲染机制

设置一个参数reRender。设置v-if=“reRender”,并将reRender初始值设置为false,从后台获取数据之后,将reRender=true。

这样就能够将最新的数据渲染到子组件的视图中了。但这样,如果我在同一个页面中调用了很多次这个子组件,生成多个仪表盘,就需要设置很多个类似于reRender的属性。

那么有的小可爱就提出来了,我设置一个reRender属性,然后几个子组件共

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ougexingfuba

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值