vue中父组件向子组件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>

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

本文讲解了vue中父组件向子组件echarts传值问题 ，更多相关内容请关注Gxl网。