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

解决方法"/>

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

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

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

出现这个问题，可能有以下两个原因：

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

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

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

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

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

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

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

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

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