为什么我从 vue js 中的 props 中获取 null ？

Question

这是我的父组件，我将道具传递给孩子 组件，但我在我的子组件中得到空值，我真的 无法弄清楚问题出在哪里是我的父组件：

<template>
    <div>
      <div v-if="loading">
        <SfLoader :loading="loading" />
      </div>
      <div v-else>
    <CustomProductCard :product="product" />
        

      </div>
    </div>
  </template>  
<script>
import {usePageStore} from '~/stores/page'
import { useProduct } from '~/composables';
import { onMounted,ref } from '@nuxtjs/composition-api';
import CustomProductCard from '~/components/CustomProductCard.vue'
import {SfLoader} from '@storefront-ui/vue'
 
export default{
    components:{
        CustomProductCard,
         SfLoader
    },
    setup(){
        const {routeData}  = usePageStore();
        const {getProductDetails,loading} = useProduct();

const product = ref('')

        const productParams = {
    filter: {
      sku: {
        eq: routeData.sku,
      },
    }
  };
  onMounted(async() => {
    const data = await getProductDetails(productParams);
    product.value = data.items?.[0]
  })
  console.log(product,"props value")
  return {
     product,
     loading
   }
    }
}
</script>

这里我将 props 传递给 CustomProductPage 这是我收到此优点的子组件：

<template>
    <div class="custom_product-card" >
        <div class="custom_product-data" >
            <SfImage />
            <div class="custom_product-description" >
                <div>
                    //heading and desscription goes here
                </div>
                //sf select goes here
            </div>
        </div>
        <div class="custom_product-actions-container" >
            //price goes here
            <div class="product-price-container" >
                <div class="product-cart-actions">
//all the rating goes here
                </div>
            </div>
                            //add to cart action

        </div>
    </div>
</template>
<script>
import {
    SfImage,
    SfRating,
    SfSelect,
    SfAddToCart,
    SfPrice,
    SfHeading
}
from "@storefront-ui/vue";
export default {
    components: {
        SfImage,
    SfRating,
    SfSelect,
    SfAddToCart,
    SfPrice,
    SfHeading
    },
    props: {
    product: { 
        type: Object,
        required: true
    }
},
  setup(props) {
    console.log(props.product)
  }  
}
</script>

所以告诉我为什么我在控制台中得到空？？？

Answer 1

因为你定义了const Product = ref('')，如果你想在getProductDetails请求完成后获取产品的值，你需要添加一个watch函数

import {
  watch
} from '@nuxtjs/composition-api';
setup(props) {
  console.log(props.product)
  watch(() => props.product, () => {
    console.log(props.product)
  })
}