Vue.js中如何传递Object作为prop？为何接收的prop为undefined？

AI 小北

2026-7-14

解决Vue中Object类型Prop接收为undefined的问题

你的子组件Prop配置本身是正确的（Object类型用工厂函数返回默认值符合Vue规范），出现this.info为undefined的情况，基本都是父组件传递环节的问题，以下是具体排查和解决方向：

检查Prop传递的命名匹配
Vue模板对属性名的大小写不敏感，驼峰命名的Prop在模板中需要转换成短横线格式。比如子组件定义的Prop是info没问题，但如果父组件里错误使用了其他命名（比如:userInfo="xxx"），或者子组件Prop是驼峰但父模板没转短横线，都会导致接收失败。
正确示例：
子组件Prop：
```
props: {
  userInfo: {
    type: Object,
    default: () => ({})
  }
}
```
父组件模板：
```
<ChildComponent :user-info="parentInfo"/>
```
确认父组件传递的变量本身有效
先在父组件中打印要传递的变量，确认它不是undefined。如果父组件里的变量未初始化、未赋值，子组件自然接收不到有效值。比如父组件数据中未定义info，就会默认传递undefined：
```
<script>
export default {
  data() {
    return {
      // 缺失info的初始化，传递给子组件就是undefined
    }
  }
}
</script>
```
解决：给父组件的变量加初始值，比如info: {}。
处理异步数据的加载时机
如果父组件的info是通过接口异步获取的，子组件mounted钩子执行时，异步请求可能还未完成，此时info仍为undefined。
解决方式二选一：
1. 给子组件添加v-if，确保数据存在后再渲染：
```
<ChildComponent :info="info" v-if="info"/>
```
2. 在子组件中监听info的变化，替代mounted钩子的打印：
```
<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    info(newVal) {
      console.log(newVal) // 数据更新时触发
    }
  }
}
</script>
```