Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

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>

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

4
Subscribe
Notify of
guest

0 則留言
Inline Feedbacks
View all comments