首页>国内 > 正文

速递!验证 Vue Props 类型,这几种方式你可能还没试用过!

2022-08-29 09:50:16来源:大迁世界

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可以是以下之一:

NumberStringBooleanArrayObjectDateFunctionSymbol

此外,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中使用,也可以作为默认值:

<script>import { Position } from "./types";export default {  props: {    position: {      validator(value) {        return Object.values(Position).includes(value);      },      default: Position.BOTTOM,    },  },};</script>

最后,父级组件也可以导入并使用这个枚举,它消除了我们应用程序中对魔法字符串的使用:

<script>import DropDownComponent from "./components/DropDownComponent.vue";import { Position } from "./components/types";export default {  components: {    DropDownComponent,  },  data() {    return {      Position,    };  },};</script>
布尔映射

布尔类有独特的行为。属性的存在或不存在可以决定 prop 的值。

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,      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,      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()</script>

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

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

随着应用程序规模的扩大,类型检查是防止错误的第一道防线。结合TypeScript,它可以让你对正确使用组件接口有很高的信心,减少bug,提高整体代码质量和开发体验。

关键词: 应用程序 作为一个 可以使用 是否有效 进行检查

相关新闻

Copyright 2015-2020   三好网  版权所有