最近做项目,遇到个大坑,这会爬出来了,写个总结,避免下次掉坑。
vue父子组件传值不能实时更新问题,父组件将值传给了子组件,但子组件显示的值还是原来的初始值,并没有实时更新,为什么会出现这种问题呢?
出现这个问题,可能有以下两个原因:
一、 父组件没有把值传过去,子组件没有获取到最新的值。
二、子组件接收到最新的值了,但是没有实时渲染到视图上。
如果是第一种情况很简单,核对传的参数,确保把最新的值传过去就可以了。
若是第二种情况,稍微有些麻烦,但也可以解决,主要有两种解决方案:
① 利用v-if的重新渲染机制,获取到值之后,将子组件重新渲染一遍。
② 利用watch监听数据,若是数据变化,调用视图渲染方法。
下面,结合项目的实际情况,具体分析这两种方法。
在项目中,将erchart中的生成仪表盘的数据封装了一个子组件,父组件中传给仪表盘一个初始值,后续,调用后台接口返回最新的数据传给这个仪表盘组件的之后,发现仪表盘中的数据并没有实时的更新。仪表盘如下图:
首先,利用第①种