MUKI AI Summary
Vue 父子元件可以傳遞資料,但若在 onMounted 時渲染非即時資料,可能會報 undefined。此時可使用 watch 監聽資料變化,確保父元件資料改變時,子元件能即時處理。
使用 Vue3 + TypeScript + setup 語法糖,父元件透過 props 傳遞資料給子元件,子元件利用 watch 監聽 props.data,資料變化時執行 fetchData 操作,達到資料同步更新。...
Vue 的父子元件可以傳值,這點沒問題。如果今天我想傳遞的不是立即性的資料,那在 onMounted
時渲染資料,應該會報 undefined
。
這時候我們可以改用 watch
監聽資料,只要父元件傳過來的資料有改變,就開始處理資料...等等。
我使用的寫法是 Vue3 + TypeScript + setup 語法糖,如果你也有在類似的寫法,希望對你有幫助。
父元件
<template> <SensorAnalytics :data="sensorRawData" /> </template> <script setup lang="ts"> import type { Ref } from 'vue' import SensorAnalytics from '@/components/history/SensorAnalytics.vue' const sensorRawData: Ref<any[]> = ref([]) const fetchData = async() => { // 處理 API 回來的資料,以下就不細寫了。 } </script>
子元件
<template> 顯示資料:{{ data }} </template> <script setup lang="ts"> import { toRefs, watch } from 'vue' interface Props { data: Data } const props = defineProps<Props>() const { data } = toRefs(props) // 使用 props.data 監聽資料 watch(props.data, (newValue) => { console.log(newValue) fetchData() }) const fetchData = () => { console.log('操作資料') } </script>
歡迎給我點鼓勵,讓我知道你來過 :)