Vue子组件接收响应式对象Props时无法读取其属性

问题重现 #

父组件代码：

<template>
    <Child :info="reactiveObject" />
</template>
<script setup>
const reactiveObject = reactive({ name: "Object", id: "443"})
</script>

子组件Child.vue代码：

<template>
    <div> {{ info.name }} 
</template>
<script setup>
const props = defineProps({
    info: Object,
})
</script>

运行后子组件使用{{ info.name }}抛出错误：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')，但直接渲染{{ info }}却能正常显示值。

问题原因 #

最直接的原因是子组件模板的<div>标签未闭合，Vue的模板编译器无法正确解析完整的DOM结构，打乱了组件的渲染流程，导致初始渲染时info被判定为undefined，访问其name属性自然触发类型错误。

而直接渲染info时，可能在后续的渲染周期中模板解析的容错机制生效，或者info已经完成传递，所以能正常显示对象内容，但属性访问的时机更早，触发了错误。

解决方案 #

1. 修复模板标签闭合问题
   修改子组件模板，补全闭合标签：

   <template>
       <div>{{ info.name }}</div>
   </template>
   

2. 为props添加默认值（可选）
   为了避免props未传递时出现类似错误，可给info设置空对象默认值：

   const props = defineProps({
       info: {
           type: Object,
           default: () => ({}) // 使用工厂函数返回新对象，避免引用共享
       }
   })
   

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