微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
vue 要求任何传递给组件的数据，都要申明为 props。此外，它还提供了一个弱小的内置机制来验证这些数据。这就像组件和消费者之间的契约一样，确保组件按预期应用。
这节课咱们来看下这个验证机制，它能够帮忙咱们在开发和调试过程中缩小 but，减少咱们的自信心(摸鱼工夫)。
根底
原始类型
验证根本类型比较简单，这里咱们不过多的介绍，间接看上面例子：
export default { props: { // Basic type check // ("null "和 "undefined "值容许任何类型) propA: Number, // 多种可能的类型 propB: [String, Number], // 必传的参数 propC: { type: String, required: true }, // 默认值 propD: { type: Number, default: 100 }, }}简单类型
简单类型也能够用同样的形式进行验证。
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 = firstName this.lastName = lastName }}咱们能够把 Person 作为一个类型传递给 prop 类型:
export default { props: { author: Person }}高级验证
validator 办法
Props 反对应用一个 validator 函数。这个函数承受 prop 原始值，并且必须返回一个布尔值来确定这个 prop 是否无效。
prop: { validator(value) { // The value must match one of these strings return ['success', 'warning', 'danger'].includes(value) } }应用枚举
有时咱们想把值放大到一个特定的汇合，这能够通过枚举来实现：
export const Position = Object.freeze({ TOP: "top", RIGHT: "right", BOTTOM: "bottom", LEFT: "left"});它能够导入 validator 中应用，也能够作为默认值:
<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原生反对接口和枚举。
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>枚举
咱们曾经探讨了如何在 JS 中伪造一个枚举。这对于TypeScript来说是不须要的，它本向就反对了：
<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>Vue 3
上述所有内容在应用 Vue 3与 选项API 或 组合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> 时，能够应用纯类型注解来申明 prop:
<script setup lang="ts">defineProps<{ title?: string likes?: number}>()</script>或者应用一个接口:
<script setup lang="ts">interface Props { foo: string bar?: number}const props = defineProps<Props>()</script>最初，在应用基于类型的申明时，申明默认值。
<script setup lang="ts">interface Props { foo: string bar?: number}const { foo, bar = 100 } = defineProps<Props>()</script>总结
随着应用程序规模的扩充，类型查看是避免谬误的第一道防线。联合TypeScript，它能够让你对正确应用组件接口有很高的信念，缩小bug，进步整体代码品质和开发体验。
作者：Fotis Adamakis 译者：前端小智 起源：mediun
原文：https://fadamakis.mdium.com/v...
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。