校验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 = 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>