/
CATEGORY
Vue
/
Vue 父元件傳遞 API 資料給子元件

Vue 父元件傳遞 API 資料給子元件

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>

歡迎給我點鼓勵,讓我知道你來過 :)

5
MUKI says:

如果文章有幫助到你,歡迎分享給更多人知道。文章內容皆為 MUKI 本人的原創文章,我會經常更新文章以及修正錯誤內容,因此轉載時建議保留原出處,避免出現版本不一致或已過時的資訊。

本文地址:https://muki.tw/vue-api-data-props/ 已複製

Subscribe
Notify of
guest

0 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Copyright © since 2008 MUKI space* / omegaSS theme All Rights Reserved.