微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。 本文 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
}
}
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 中使用，也可以作为默认值:
{{ position }}
import { Position } from "./types";
export default {
props: {
position: {
validator(value) {
return Object.values(Position).includes(value);
},
default: Position.BOTTOM,
},
},
};
最后，父级组件也可以导入并使用这个枚举，它消除了我们应用程序中对魔法字符串的使用:
import DropDownComponent from "./components/DropDownComponent.vue";
import { Position } from "./components/types";
export default {
components: {
DropDownComponent,
},
data() {
return {
Position,
};
},
};
布尔类有独特的行为。属性的存在或不存在可以决定 prop 的值。
将Vue的内置 prop 验证与 TypeScript相结合，可以让我们对这一机制有更多的控制，因为TypeScript原生支持接口和枚举。
Interface我们可以使用一个接口和 PropType 来注解复杂的 prop 类型。这确保了传递的对象将有一个特定的结构。
import Vue, { PropType } from 'vue'
interface Book {
title: string
author: string
year: number
}
const Component = Vue.extend({
props: {
book: {
type: Object as PropType,
required: true,
validator (book: Book) {
return !!book.title;
}
}
}
})
我们已经探讨了如何在 JS 中伪造一个枚举。这对于TypeScript来说是不需要的，它本向就支持了：
import Vue, { PropType } from 'vue'
enum Position {
TOP = 'top',
RIGHT = 'right',
BOTTOM = 'bottom',
LEFT = 'left',
}
export default {
props: {
position: {
type: String as PropType,
default: Position.BOTTOM,
},
},
};
上述所有内容在使用 Vue 3与 选项API 或 组合API 时都有效。区别在于使用 时。props 必须使用 defineProps() 宏来声明，如下所示：
const props = defineProps(['foo'])
console.log(props.foo)
defineProps({
title: String,
likes: Number
})
或者在使用 TypeScript 的 时，可以使用纯类型注解来声明 prop:
defineProps()
或者使用一个接口:
interface Props {
foo: string
bar?: number
}
const props = defineProps()
最后，在使用基于类型的声明时，声明默认值。
interface Props {
foo: string
bar?: number
}
const { foo, bar = 100 } = defineProps()
随着应用程序规模的扩大，类型检查是防止错误的第一道防线。结合TypeScript，它可以让你对正确使用组件接口有很高的信心，减少bug，提高整体代码质量和开发体验。
作者：Fotis Adamakis 译者：前端小智 来源：mediun
原文：https://fadamakis.mdium.com/validating-yur-vue-props-like-a-pro-5a2d0ed2b2d6
交流有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
