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: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 width: { 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>
默默搬砖中 ——假装自己是小白