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

原文链接：https://blog.csdn.net/Uookic/article/details/80638883?utm_source=copy

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

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

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

 /父组件
    <div class="chart-wrapper">
     <pie-chart v-if="flag" :pie-data="piedata"></pie-chart>
   </div>
   ...
   import {getPie} from '@/api/status'
   export default {
   name: 'device',
   data() {
     return {
       flag:false,
       piedata:{},
       ...
   },
   created(){
     this.init()
   },
  methods:{
    init(){
         getPie().then(this.getInfoSucc)
    },
    getInfoSucc(res){
       res = res.data;
        if(res.code ==0){
          const values = res.values;
          this.piedata = values.piedata;
          this.flag = true
        }
      }

 //子组件
 <template>
   <div :class="className" :style="{height:height,width:width}"></div>
 </template>

 <script>
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import { debounce } from '@/utils'

 export default {
   props: {
     pieData: {
       type: Object
     },
     msg: {
       type:Number
     },
     className: {
       type: String,
       default: 'chart'
     },
     width: {
       type: String,
       default: '100%'
     },
     height: {
       type: String,
       default: '300px'
     }
   },
   data() {
     return {
       chart: null
     }
   },
   // watch: {
   //   piedata: {
   //     deep: true,
   //     handler(val) {
   //       console.log(val)
   //       this.setOptions(val)
   //     }
   //   }
   // },
   mounted() {
     console.log("pieData:"+JSON.stringify(this.pieData))
     this.initChart()
     this.__resizeHanlder = debounce(() => {
       if (this.chart) {
         this.chart.resize()
       }
     }, 100)
     window.addEventListener('resize', this.__resizeHanlder)
   },
   beforeDestroy() {
     if (!this.chart) {
       return
     }
     window.removeEventListener('resize', this.__resizeHanlder)
     this.chart.dispose()
     this.chart = null
   },
   methods: {
     setOptions({ text, arrtype, arrdata } = {}) {
       this.chart.setOption({
         title: {
           text: text
         },
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
         legend: {
           left: 'center',
           bottom: '10',
           data: arrtype
         },
         calculable: true,
         series: [
           {
             name: '',
             type: 'pie',
             roseType: 'radius',
             radius: [15, 95],
             center: ['50%', '42%'],
             data: arrdata,
             animationEasing: 'cubicInOut',
             animationDuration: 2600
           }
         ]
       })
     },
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.pieData);
     }
   }
 }
 </script>