关于前端:验证-Vue-Props-类型你这几种方式你可能还没试用过

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 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 中应用，也能够作为默认值:

<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 />

将 Vue 的内置 prop 验证与 TypeScript 相结合，能够让咱们对这一机制有更多的管制，因为 TypeScript 原生反对接口和枚举。

咱们能够应用一个接口和 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 与选项 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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于前端:验证-Vue-Props-类型你这几种方式你可能还没试用过

根底

原始类型

简单类型

高级验证

validator 办法

应用枚举

布尔映射

TypeScript

Interface

枚举

Vue 3

总结

交换