20250317-vue-Prop4

运行时类型检查

校验选项中的 type 可以是下列这些原生构造函数：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol
• Error

另外，type 也可以是自定义的类或构造函数，Vue 将会通过 instanceof 来检查类型是否匹配。例如下面这个类：

class Person {constructor(firstName,lastName) {this.firstName = firstName;this.lastName = lastName;}
}

我们可以将其作为一个 prop 的类型：

<template><text>{{aProp.message}}</text>
</template><script>import Person from './Person.js'export default {props:{author:Person}}
</script><style>
</style>

Vue 会通过 instanceof Person 来校验 author prop 的值是否是 Person 类的一个实例。

js文件：

const Person = {class Person {constructor(firstName,lastName) {this.firstName = firstName;this.lastName = lastName;}}
} 
export default Person

子组件代码：

<template><text>{{aProp.message}}</text>
</template><script>import Person from './Person.js'export default {props:{author:Person}}
</script><style>
</style>

父组件代码：

<template><Sub :author="anObject"></Sub>
</template><script>import Sub from './Sub.vue'export default {components: {Sub,},data() {return {anObject:{anProperty:'anProperty'}}}}
</script><style></style>

报错：

Invalid prop: type check failed for prop "author". Expected Person, got Object

可为 null 的类型

如果该类型是必传但可为 null 的，你可以用一个包含 null 的数组语法：

export default {props:{id:{type:[string,null],required:true}}}

注意如果 type 仅为 null 而非使用数组语法，它将允许任何类型。

Boolean 类型转换

声明为 Boolean 类型的 props 有特别的类型转换规则。以带有如下声明的 <MyComponent> 组件为例:

export default {props: {disabled: Boolean}
}

该组件可以被这样使用：

<!-- 等同于传入 :disabled="true" -->
<MyComponent disabled /><!-- 等同于传入 :disabled="false" -->
<MyComponent />

当一个 prop 被声明为允许多种类型时，Boolean 的转换规则也将被应用。然而，当同时允许 String 和 Boolean 时，有一种边缘情况——只有当 Boolean 出现在 String 之前时，Boolean 转换规则才适用：

// disabled 将被转换为 true
export default {props: {disabled: [Boolean, Number]}
}// disabled 将被转换为 true
export default {props: {disabled: [Boolean, String]}
}// disabled 将被转换为 true
export default {props: {disabled: [Number, Boolean]}
}// disabled 将被解析为空字符串 (disabled="")
export default {props: {disabled: [String, Boolean]}
}