如何解决vue中父组件向子组件echarts传值问题

这篇文章主要介绍了如何解决vue中父组件向子组件echarts传值问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

专注于为中小企业提供网站建设、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业大安市免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

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

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

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

//父组件
   
    
  

  ...   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         }      }
//子组件

然后子组件就能正常显示了
如何解决vue中父组件向子组件echarts传值问题

感谢你能够认真阅读完这篇文章,希望小编分享的“如何解决vue中父组件向子组件echarts传值问题”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


本文名称:如何解决vue中父组件向子组件echarts传值问题
本文网址:http://pwwzsj.com/article/jshjoj.html