vue中echarts爬坑笔记(二) 父组件异步获取的数据给子组件,子组件报错或数据不更新

父组件从后台请求的数据传给echarts所在的子组件遇到的问题:
1、父组件数据在没有设置初始值情况下,子组件接受到的数据报错:
类似这种:data.count is not a function
在子组件的mounted里面打印父组件传递过来的数据,发现是空的。
在给父组件赋初始值后,报错消失,说明父组件将初始值传给子组件更新视图是在父组件从后台获取数据之前,从而导致第二个问题
2、父组件有初始值得情况下,echart的视图只显示初始值,父组件从后台获取到的数据能传递到子组件,但是视图并没有更新:
在父组件获取到后台数据后,通过ref标签调用子组件的echarts初始化方法。

this.$refs.nested.initEcharts()

3、这样有一个问题是视图会先显示出初始值,然后再跳成后台获取到的值,所以如果想要没有初始值可以采用下面的方法:

在父组件中给子组件用v-if设置flag控制子组件的初始化,等父组件从后台获取到数据后再将flag置true。


你可能感兴趣的:(vue模块,echarts)