Vue で親コンポーネントから子コンポーネントの echart に値を渡す際の問題

echartsの落とし穴問題を記録する

問題: 親コンポーネントが子コンポーネントのechartsに値を渡すと、子コンポーネントが取得したpropsが空であることがわかります。フック関数は間違った場所にありましたが、後で、マウントされても作成されても機能しないことがわかりました。渡されたデータが親コンポーネントのデータで定義されている場合、子コンポーネントは正常に表示されます

原因: 後で調査したところ、ここで N ワードが省略されており、echarts はレンダリング中にデータを渡していることがわかりました

解決策: フラグを定義する親コンポーネントで、データを取得するとサブコンポーネントがレンダリングされます

//父组件
   <p class="chart-wrapper">
    <pie-chart v-if="flag" :pie-data="piedata"></pie-chart>
  </p>  ...
  export default {
  name: &#39;device&#39;,
  data() {    return { 
      flag:false,
      piedata:{},      ...
  },
  created(){
    this.init()
  },
 methods:{
   init(){   
       axios.get(&#39;/static/mock/status/pie.json&#39;).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 の詳細については、PHP Chinese net を参照してください。

関連する推奨事項:
JavaScriptの厳密モードの詳細な説明

ログイン機能を実装するためのPHPの関連コード分析

JavaScript関連コンテンツの説明

以上がVue で親コンポーネントから子コンポーネントの echart に値を渡す際の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。