Vue中父组件向子组件echarts传值问题

问题：当父组件传值给子组件echarts时，发现子组件获取的props为空，刚开始以为是钩子函数放错了地方，后来发现从mounted和created都不行。当在父组件data定义传递的数据的时候子组件显示正常

原因：后来经过排查，发现echarts是在渲染的时候就传递数据

解决方案：在父组件定义一个flag，当数据获得的之后再进行子组件的渲染

<template>
  <div class="dashboard-container">
    <!-- 面板统计组件 -->
    <panel-group :todayAppoint="todayAppoint" :newMember="newMember" :newCard="newCard"/>

    <el-row :gutter="40">
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card>
          <!-- 饼状图：会员卡销售情况 -->
          <pie-chart v-if="flag" :legendData="cardSales.legendData" :seriesData="cardSales.seriesData"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import home from "@/api/home"
  import PieChart from './components/PieChart'
  import BarChart from './components/BarChart'
  import PanelGroup from './components/PanelGroup'

  export default {
  name: 'Dashboard',
  components: { PieChart, BarChart, PanelGroup },
  data() {
    return {
      todayAppoint: 0, //今日预约
      newMember: 0, //新增会员卡(日)
      newCard: 0, //新增会员(日)
      flag: false, // 判断是否显示图表组件
      cardSales: {
        legendData: [],
        seriesData: [
        ]
      }, // 会员卡销售情况
      sixMonthData: {} // 查询近6个月办卡情况
    }
  },
  mounted (){
    // 当加载dom后，会调用 this.initChart() 来进行初始化echarts实例
    this.$nextTick(() => {
      this.fetchData()
    })
  },
  methods: {
    fetchData() {
      home.index().then(response => {
        this.todayAppoint = response.data.today_appoint
        this.newMember = response.data.new_member
        this.newCard = response.data.new_card
      })

      home.sales().then(response => {
        let data = response.data.cardSalesInfo
        var len = data.length;
        for (var i = 0; i < len; i++) {
          console.log("datai",data[i].name)
          this.cardSales.seriesData.push({
            name: data[i].name,
            value: data[i].value
          })
          this.cardSales.legendData.push(data[i].name)
        }
        this.flag = true
        console.log(this.cardSales)
      })
    }
  },
}
</script>

<style lang="scss" scoped>

</style>