Vue父子组件传递participants属性出现类型校验错误该如何解决？

错误原因梳理 #

Vue Error: Invalid prop: type check failed for prop "participants". Expected Object, got Array
该报错说明父组件实际传递给子组件的participants是数组类型，与你子组件声明的期望Object类型不匹配。

Invalid prop type: "[object Object]" is not a constructor
该报错是因为你的子组件props语法完全不符合Vue规范：Vue期望prop的类型声明位传入构造函数（如Object/Array/String等），你错误地将配置对象放到了数组类型声明位，无法通过校验。同时Vue的prop配置也不存在value字段，对象/数组类型的默认值需要通过default工厂函数定义。

对应修复方案 #

情况1：父组件传递的participants是单个对象（和你示例的结构一致） #

子组件正确props写法

export default {
  props: {
    participants: {
      type: Object,
      // 对象类型默认值必须用工厂函数返回
      default: () => ({
        primaryAlias : '',
        primaryEmail : '',
        primaryAddress : '',
        primaryPhone: ''
      })
    }
  }
}

父组件props修正写法（你原父组件的props定义语法也不规范）

export default {
  props: {
    bordered: {
      type: Boolean,
      default: true
    },
    striped: {
      type: Boolean,
      default: true
    },
    participants: {
      type: Object,
      default: () => ({
        primaryAlias : '',
        primaryEmail : '',
        primaryAddress : '',
        primaryPhone: ''
      })
    }
  }
}

情况2：父组件传递的participants是对象数组（对应首次报错的实际传值类型） #

子组件正确props写法

export default {
  props: {
    participants: {
      type: Array,
      // 数组类型默认值也必须用工厂函数返回
      default: () => []
    }
  }
}

注意事项 #

• 仅声明类型的prop可以简写为participants: Object，需要加默认值、必填校验时才写成完整配置对象形式
• 类型为Object/Array的prop，默认值必须用工厂函数返回，避免多组件实例共享同一份引用数据
• 父组件传值的类型需要和子组件声明的prop类型严格匹配，避免类型校验失败

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