這篇文章主要介紹了如何解決vue中父組件向子組件echarts傳值問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)大安市免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

問題：當(dāng)父組件傳值給子組件echarts時，發(fā)現(xiàn)子組件獲取的props為空，剛開始以為是鉤子函數(shù)放錯了地方，后來發(fā)現(xiàn)從mounted和created都不行。當(dāng)在父組件data定義傳遞的數(shù)據(jù)的時候子組件顯示正常

原因：后來經(jīng)過排查，此處省略N字，發(fā)現(xiàn)echarts是在渲染的時候就傳遞數(shù)據(jù)

解決方案：在父組件定義一個flag，當(dāng)數(shù)據(jù)獲得的之后再進行子組件的渲染

//父組件
   
    
  
  ...
  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 
       }
     }

//子組件

然后子組件就能正常顯示了

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何解決vue中父組件向子組件echarts傳值問題”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!