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

互联网 18-6-11

记录echarts踩坑问题

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

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

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

//父组件    <p class="chart-wrapper">     <pie-chart v-if="flag" :pie-data="piedata"></pie-chart>   </p>  ...   export default {   name: 'device',   data() {    return {        flag:false,       piedata:{},      ...   },   created(){     this.init()   },  methods:{    init(){           axios.get('/static/mock/status/pie.json').then(this.getInfoSucc)    },     getInfoSucc(res){       res = res.data;       if(res.code ==0){          const values = res.values;            this.piedata = values.piedata;            this.flag = true         }      }

//子组件<template>   <p :class="className" :style="{height:height,width:width}"></p></template><script>import echarts from 'echarts'require('echarts/theme/macarons') // echarts themeimport { 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>

然后子组件就能正常显示了