監視を監視し、Vue3の親コンポーネントの非同期propsが値を渡し、子コンポーネントがそれを受け取れない問題を解決

静的データを書き込む場合、親コンポーネントが子コンポーネントに値を渡して受信・描画するのは問題ありませんが、親コンポーネントが非同期でデータを取得すると、子コンポーネントは描画よりも遅れてデータを受け取ることになり、 echartsを使用して描画しているのですが、チャートを表示するとチャートが直接表示されません

この問題を解決するには、watch を使用して props データを監視し、watch で代入操作を実行します。

コード上で直接

親コンポーネント、vue3 構文

setup() {
            // 用定时器模拟发请求异步获取后端接口的数据
            const weekNumber = ref([])
            setTimeout(()=>{
                weekNumber.value=[150, 120, 200, 80, 170, 110, 130]
                console.log( weekNumber.value[0]);//值为150，后打印
            },1000)
            console.log( weekNumber.value[0]);//值为undefined，先打印
            return{ weekNumber};
        }

サブコンポーネントの props は通常どおり受信されますが、受信したデータはウォッチで監視する必要があります。

watch(()=>props.weekNumber,(newVal) => {
        console.log("newVal:",newVal);
        info.options.series[0].data =newVal
        initChart()//重绘echarts图表
        console.log("weekNumber在watch之后:",props.weekNumber);//后打印，接收到新数据
      })
      console.log("weekNumber在watch之前:",props.weekNumber);//先打印，接收不到

コンソールの印刷順序を見てみましょう

監視を監視し、Vue3の親コンポーネントの非同期propsが値を渡し、子コンポーネントがそれを受け取れない問題を解決

おすすめ