Vue3 Composition API父传子props：能获取对象却无法访问属性？

这个问题的核心是子组件初始渲染时myVar是undefined，导致直接访问myVar.a触发类型错误。

为什么直接用{{ myVar }}能正常显示？因为Vue的响应式系统会在myVar从undefined变为目标对象后自动更新模板，但在第一次渲染时，myVar还没被父组件赋值，此时访问它的属性就会报错。

解决办法 #

1. 给Props设置默认空对象 #

修改子组件的defineProps，给myVar添加默认值，确保初始渲染时它是一个空对象而非undefined：

defineProps({
  myVar: {
    type: Object,
    // 用工厂函数返回新对象，避免多个组件实例共享同一个对象引用
    default: () => ({})
  }
})

2. 使用可选链操作符（模板中） #

在模板里通过?.安全访问属性，即使myVar为undefined也不会报错：

{{ myVar?.a }}

3. 确保父组件的初始值非undefined #

在父组件中给myVar设置初始空对象，避免传递undefined给子组件：

// 父组件script setup示例
import { ref } from 'vue'
const myVar = ref({}) // 初始化为空对象，后续异步赋值再更新

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