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

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

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

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

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

 1 /父组件
 2    <div class="chart-wrapper">
 3     <pie-chart v-if="flag" :pie-data="piedata"></pie-chart>
 4   </div>
 5   ...
 6   import {getPie} from '@/api/status'
 7   export default {
 8   name: 'device',
 9   data() {
10     return { 
11       flag:false,
12       piedata:{},
13       ...
14   },
15   created(){
16     this.init()
17   },
18  methods:{
19    init(){   
20         getPie().then(this.getInfoSucc)
21    }, 
22    getInfoSucc(res){
23       res = res.data;
24        if(res.code ==0){
25          const values = res.values;  
26          this.piedata = values.piedata;  
27          this.flag = true 
28        }
29      }

  1 //子组件
  2 <template>
  3   <div :class="className" :style="{height:height,width}"></div>
  4 </template>
  5 
  6 <script>
  7 import echarts from 'echarts'
  8 require('echarts/theme/macarons') // echarts theme
  9 import { debounce } from '@/utils'
 10 
 11 export default {
 12   props: {
 13     pieData: {
 14       type: Object
 15     },
 16     msg: {
 17       type:Number
 18     },
 19     className: {
 20       type: String,
 21       default: 'chart'
 22     },
 23      {
 24       type: String,
 25       default: '100%'
 26     },
 27     height: {
 28       type: String,
 29       default: '300px'
 30     }
 31   },
 32   data() {
 33     return {
 34       chart: null
 35     }
 36   },
 37   // watch: {
 38   //   piedata: {
 39   //     deep: true,
 40   //     handler(val) {
 41   //       console.log(val)
 42   //       this.setOptions(val)
 43   //     }
 44   //   }
 45   // },
 46   mounted() { 
 47     console.log("pieData:"+JSON.stringify(this.pieData))
 48     this.initChart()
 49     this.__resizeHanlder = debounce(() => {
 50       if (this.chart) {
 51         this.chart.resize()
 52       }
 53     }, 100)
 54     window.addEventListener('resize', this.__resizeHanlder) 
 55   },
 56   beforeDestroy() {
 57     if (!this.chart) {
 58       return
 59     }
 60     window.removeEventListener('resize', this.__resizeHanlder)
 61     this.chart.dispose()
 62     this.chart = null
 63   },
 64   methods: {
 65     setOptions({ text, arrtype, arrdata } = {}) {  
 66       this.chart.setOption({
 67         title: {
 68           text: text
 69         },
 70         tooltip: {
 71           trigger: 'item',
 72           formatter: '{a} <br/>{b} : {c} ({d}%)'
 73         },
 74         legend: {
 75           left: 'center',
 76           bottom: '10',
 77           data: arrtype
 78         },
 79         calculable: true,
 80         series: [
 81           {
 82             name: '',
 83             type: 'pie',
 84             roseType: 'radius',
 85             radius: [15, 95],
 86             center: ['50%', '42%'],
 87             data: arrdata,
 88             animationEasing: 'cubicInOut',
 89             animationDuration: 2600
 90           }
 91         ]
 92       })
 93     },
 94     initChart() {
 95       this.chart = echarts.init(this.$el, 'macarons')
 96       this.setOptions(this.pieData); 
 97     }
 98   }
 99 }
100 </script>