Vue.js父组件传Props给子组件却获取null的原因排查

问题原因分析 #

1. 父组件product初始值类型不匹配 #

父组件中product初始化为ref('')（空字符串），但子组件props明确要求product为Object类型。Vue处理类型不匹配的props时会进行隐式转换，可能导致子组件初始拿到的是null或不符合预期的值。

2. 子组件未监听props更新 #

子组件setup函数中的console.log(props.product)仅在组件挂载时执行一次，此时父组件的onMounted异步请求尚未完成，product仍为初始值，因此打印出null。

3. loading状态的可靠性存疑 #

父组件通过useProduct中的loading控制子组件渲染，但如果该loading未正确绑定getProductDetails的异步请求状态（比如请求开始时未设为true，结束时未设为false），会导致子组件提前渲染，此时product还未完成赋值。

解决方案 #

1. 修正父组件product初始值 #

将product的初始值改为与子组件props类型匹配的null或空对象：

// 父组件setup中
const product = ref(null)

2. 子组件监听props变化 #

使用watch监听props.product，确保能捕获到父组件更新后的最新值：

// 子组件script中
import { watch } from '@nuxtjs/composition-api'

export default {
  // ...其他代码
  setup(props) {
    // 监听product变化
    watch(() => props.product, (newProduct) => {
      console.log('更新后的product:', newProduct)
    }, { immediate: true }) // immediate: true会立即执行一次回调，打印初始值
  }
}

3. 确保loading状态正确 #

检查useProduct中的loading逻辑，确保它准确反映异步请求的状态：

// useProduct composable示例
export function useProduct() {
  const loading = ref(false)
  
  const getProductDetails = async (params) => {
    loading.value = true
    try {
      const response = await yourApiCall(params)
      return response
    } catch (error) {
      console.error('获取产品详情失败:', error)
      throw error
    } finally {
      loading.value = false
    }
  }
  
  return { getProductDetails, loading }
}

4. 添加异步请求错误处理 #

在父组件的onMounted中捕获请求异常，避免product一直处于初始状态：

onMounted(async() => {
  try {
    const data = await getProductDetails(productParams);
    product.value = data.items?.[0] || null
  } catch (err) {
    console.error('产品详情请求失败:', err)
    product.value = null
  }
})

内容的提问来源于stack exchange，提问作者Muhammad Usman