校验vue prop的几种方式
校验vue prop的几种方式
vue 要求将传递给组件的任何数据显式声明为 props。此外，它还提供了强大的内置机制来验证该数据。这充当组件和父级组件之间的约定，并确保组件能按预期使用。
让我们看看怎么对props进行校验。它可以帮助我们在开发和调试过程中减少错误并提高整体代码质量。
基础
原始类型
验证基本类型就像将类型选项设置为基本类型构造函数一样简单。
<script lang="ts">
import Vue, { PropType } from 'vue'
enum Position {
TOP = 'top',
RIGHT = 'right',
BOTTOM = 'bottom',
LEFT = 'left',
}
export default {
props: {
position: {
type: String as PropType<Position>,
default: Position.BOTTOM,
},
},
};
script>
复杂类型
复杂类型也可以用同样的方式进行验证。
export default {
props: {
// 带有默认值的对象
propE: {
type: Object,
default(rawProps) {
return { message: 'hello' }
}
},
// 带有默认值的数组
propF: {
type: Array,
default() {
return []
}
},
// 带有默认值的函数
propG: {
type: Function,
default() {
return 'Default function'
}
}
}
}
type可以是以下几个值：
NumberStringBooleanArrayObjectDateFunctionSymbol
此外，type还可以是自定义类或构造函数，并且将通过instanceof检查进行断言。例如，给定以下类：
class Person {
constructor(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
}
我们同样可以把Person用作 prop 类型
export default {
props: {
author: Person
}
}
高级验证
验证器功能
Props 支持验证器函数的使用。该函数接受 prop 的原始值，并且必须返回一个布尔值来确定该 prop 是否有效
export default {
prop: {
validator(value) {
return ['success', 'warning', 'danger'].includes(value)
}
},
}
使用枚举
有时我们想将值缩小到一个特定的集合，这可以通过伪造一个枚举来完成，如下所示：
export const Position = Object.freeze({
TOP: "top",
RIGHT: "right",
BOTTOM: "bottom",
LEFT: "left"
});
它可以在验证器中导入和使用，也可以作为默认值。
<template>
<span :class="`arrow-position--${position}`">
{{ position }}
span>
template>
<script>
import { Position } from "./types";
export default {
props: {
position: {
validator(value) {
return Object.values(Position).includes(value);
},
default: Position.BOTTOM,
},
},
};
script>
最后，父组件还可以导入并使用此枚举，从而消除我们应用程序中魔术字符串的使用。
<template>
<DropDownComponent :position="Position.BOTTOM" />
template>
<script>
import DropDownComponent from "./components/DropDownComponent.vue";
import { Position } from "./components/types";
export default {
components: {
DropDownComponent,
},
data() {
return {
Position,
};
},
};
script>
布尔转换
布尔属性具有独特的行为。属性的存在与否可以决定 prop 的值。
<MyComponent disabled />
<MyComponent />
TypeScript
将 Vue 的内置 prop 验证与 TypeScript 相结合可以让我们更好地控制这种机制，因为 TypeScript 本身支持接口和枚举。
Interfaces
我们可以使用interface和PropType来定义复杂的 prop 类型。这确保了传递的对象将具有特定的结构。
<script lang="ts">
import Vue, { PropType } from 'vue'
interface Book {
title: string
author: string
year: number
}
const Component = Vue.extend({
props: {
book: {
type: Object as PropType<Book>,
required: true,
validator (book: Book) {
return !!book.title;
}
}
}
})
script>
真正的枚举
前面我们已经讲解过如何在 Javascript 中伪造枚举。TypeScript 不需要这样做，因为原生支持枚举。
<script lang="ts">
import Vue, { PropType } from 'vue'
interface Book {
title: string
author: string
year: number
}
const Component = Vue.extend({
props: {
book: {
type: Object as PropType<Book>,
required: true,
validator (book: Book) {
return !!book.title;
}
}
}
})
script>
vue3
当在vue3使用带有 Options 或 Composition API 时，上述所有内容均有效。不同之处在于，在