Vue.js组件如何允许属性为对象或null，拒绝undefined？

我明白你的痛点了！Vue的Prop类型校验逻辑确实有点“较真”——虽然typeof null === 'object'是JS的小特性，但Vue内部对type: Object的校验会把null排除在外，这就是你看到> Expected Object, got Null.错误的原因。而且你需要的是允许对象或null，但绝对不接受undefined，结合vue-property-decorator的话，得调整一下写法：

正确的实现方式 #

import { Vue, Prop } from 'vue-property-decorator';

export default class YourComponent extends Vue {
  @Prop({ 
    required: true, 
    validator: (value: unknown) => {
      // 允许null，或者非数组的对象（如果需要允许数组可去掉!Array.isArray(value)）
      return value === null || (typeof value === 'object' && value !== null && !Array.isArray(value));
    }
  })
  private targetProp!: object | null;
}

为什么这么写？ #

• required: true：直接拦截undefined的情况——如果父组件未传递该Prop，或者传递了undefined，Vue会直接抛出Prop校验失败的错误，完全符合你的需求。
• 自定义validator：
  • 首先判断值是否为null，直接放行；
  • 然后判断是否为真正的对象：typeof value === 'object'确保类型匹配，value !== null避免和前面的null判断重复（逻辑上更清晰），!Array.isArray(value)是因为JS里数组的typeof也是object，如果你的场景不需要允许数组，加上这个判断就能排除数组类型。

为什么之前的写法失败？ #

当你指定type: Object时，Vue会先执行它内置的类型校验逻辑——这个逻辑会把null判定为不符合Object类型（Vue认为null是“空值”，不属于Object类型范畴），所以你的自定义validator根本没机会执行，就先抛出了Expected Object, got Null的错误。因此必须去掉type选项，完全交给自定义validator来控制类型校验逻辑。

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