校验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可以是以下几个值：

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

此外，type还可以是自定义类或构造函数，并且将通过instanceof检查进行断言。例如，给定以下类：

class Person {constructor(firstName, lastName) {this.firstName = firstNamethis.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 的值。

<!-- 相当于 :disabled="true" -->
<MyComponent disabled /><!-- 相当于 :disabled="false" -->
<MyComponent />

TypeScript

将 Vue 的内置 prop 验证与 TypeScript 相结合可以让我们更好地控制这种机制，因为 TypeScript 本身支持接口和枚举。

Interfaces

我们可以使用interface和PropType来定义复杂的 prop 类型。这确保了传递的对象将具有特定的结构。

<script lang="ts">
import Vue, { PropType } from 'vue'
interface Book {title: stringauthor: stringyear: 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: stringauthor: stringyear: 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 时，上述所有内容均有效。不同之处在于，在<script setup>使用Props 时必须使用defineProps()进行声明:

<script setup>
const props = defineProps(['foo'])
console.log(props.foo)
</script><script setup>
defineProps({title: String,likes: Number
})
</script>

或者当使用 TypeScript 时，在<script setup>可以使用纯类型注释来声明 props：

<script setup lang="ts">
defineProps<{title?: stringlikes?: number
}>()
</script>

或者使用interface

<script setup lang="ts">
interface Props {foo: stringbar?: number
}
const props = defineProps<Props>()
</script>

最后，在使用基于类型的声明时声明默认值：

<script setup lang="ts">
interface Props {foo: stringbar?: number
}
const { foo, bar = 100 } = defineProps<Props>()
</script>