Vue3组件setup中props无法获取值问题求助

问题场景 #

父视图中{{ checklist.nextchecklistId }}能正常显示正确值，但子组件NextChecklist的setup函数中props.nextChecklist始终为undefined。

父组件代码 #

<div class="row">
 <div class="col text-center">
  {{ checklist.nextchecklistId }}
  <button type="button" class="btn btn-primary btn-lg font-monospace fs-2" @click="jumpToNextChecklist">
    <NextChecklist :nextChecklist="checklist.nextchecklistId" />
  </button>
 </div>
</div>

<script>
import NextChecklist from '@/components/NextChecklist.vue'

export default {
  components: {
    NextChecklist,
  },
}
</script>

子组件代码 #

<template>
    <span>ghj</span>
</template>
    
<script>
    export default {
        name: "NextChecklist",
        props: [
            'nextChecklist'
        ],
        setup(props) {
                console.log(props.nextChecklist);
        },
    };
</script>

问题原因 #

核心原因是**checklist大概率是异步加载的数据**：子组件初始化时，父组件的checklist还未完成加载，此时传递给子组件的nextChecklist是undefined；而父模板中的{{ checklist.nextchecklistId }}会在checklist加载完成后自动更新，所以能显示正确值，但setup里的同步console.log只会执行一次，捕获的是初始的undefined。

解决方法 #

方法1：监听props变化（推荐） #

在子组件的setup中使用watch监听nextChecklist的变化，当数据更新时捕获最新值：

<template>
    <span>{{ nextChecklist }}</span>
</template>
    
<script>
import { watch, toRefs } from 'vue'

export default {
    name: "NextChecklist",
    props: ['nextChecklist'],
    setup(props) {
        const { nextChecklist } = toRefs(props)
        
        // 监听props更新
        watch(nextChecklist, (newValue) => {
            console.log('最新的nextChecklist值:', newValue)
        })

        return { nextChecklist }
    },
};
</script>

方法2：父组件添加渲染守卫 #

在父组件中通过v-if确保checklist存在后再渲染子组件，避免传递undefined：

<div class="row">
 <div class="col text-center">
  {{ checklist?.nextchecklistId }}
  <button type="button" class="btn btn-primary btn-lg font-monospace fs-2" @click="jumpToNextChecklist">
    <!-- 只有checklist存在时才渲染子组件 -->
    <NextChecklist v-if="checklist" :nextChecklist="checklist.nextchecklistId" />
  </button>
 </div>
</div>

方法3：使用onUpdated钩子 #

如果不需要实时监听，也可以在组件更新后打印最新的props值：

<script>
import { onUpdated } from 'vue'

export default {
    name: "NextChecklist",
    props: ['nextChecklist'],
    setup(props) {
        onUpdated(() => {
            console.log('更新后的nextChecklist:', props.nextChecklist)
        })
    },
};
</script>

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