Vue组件中已验证与未验证属性如何混合使用？未验证属性该如何引用？

嘿，我来帮你把这个问题理清楚～

1. 如何引用未验证的props？ #

不管props有没有添加验证规则，你都可以像引用其他常规props一样直接使用它：

• 在模板里：直接写 {{ generatecontrchart }} 或者绑定到属性上 <div :data="generatecontrchart"></div>
• 在组件脚本（比如methods、computed里）：用 this.generatecontrchart 访问

Vue对未设置验证规则的props没有额外限制，只要父组件传递了对应的值，就能正常读取；如果父组件没传，它的默认值会是undefined。

2. 能不能将未验证属性的值设为空对象？ #

当然可以！而且更推荐你显式设置默认值为空心对象，这样能避免后续使用时因为undefined导致的报错（比如想访问generatecontrchart.someProperty时，如果是undefined就会抛出错误）。

修改你的props定义如下：

props: {
  name: { 
    required: true 
  },
  generatecontrchart: {
    // 用工厂函数返回空对象，避免多个组件实例共享同一个对象引用
    default: () => ({}) 
  }
}

如果是父组件传递值的时候想设为空对象，直接传{}就行，组件能正常接收并使用，完全没问题。

小提示 #

哪怕不给props加验证规则，Vue仍然会做基础的类型校验——如果父组件传递的类型和子组件预期不符，控制台会弹出警告，但这不会影响组件运行，只是用来提醒你可能存在数据类型不匹配的问题。

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