vue父组件异步传递prop到子组件echarts画图问题踩坑总结

问题描述

在父组件使用定义好的echarts饼状图组件，通过父组件向子组件传递id和data,子父组件中data定义的数据，子组件可以接收到，图标正常显示；通过axios请求的后台数据，赋给data定义的数据对象，则子组件获取到的还是data之前定义好的数据，赋值无意义

思考 父组件传递prop就是渲染时传递

所以考虑到父组件传递prop，子组件mounted阶段就是渲染时传递，而不是赋值时传递的，所以总是传递的data()里面初始化的数据。所以通过父组件去调用子组件方法去画图也行不通。
那么我就可以给子组件加个判断 v-if 条件，当父组件从后台异步取到数据后，并且赋值给prop后，让flag = true再去渲染子组件，那么此时传递给子组件的prop就是异步获取到数据之后的值，图形就正常展示出来了。

解决方案

给子组件加个判断 v-if 条件，当父组件从后台异步取到数据后，并且赋值给prop后，让flag = true再去渲染子组件

代码如下

父组件

子组件