驗(yàn)證 Vue Props 類(lèi)型，這幾種方式你可能還沒(méi)試用過(guò)！
vue 要求任何傳遞給組件的數(shù)據(jù)，都要聲明為 props。此外，它還提供了一個(gè)強(qiáng)大的內(nèi)置機(jī)制來(lái)驗(yàn)證這些數(shù)據(jù)。這就像組件和消費(fèi)者之間的契約一樣，確保組件按預(yù)期使用。
這節(jié)課我們來(lái)看下這個(gè)驗(yàn)證機(jī)制，它可以幫助我們?cè)陂_(kāi)發(fā)和調(diào)試過(guò)程中減少 but，增加我們的自信心(摸魚(yú)時(shí)間)。
基礎(chǔ)
原始類(lèi)型
驗(yàn)證基本類(lèi)型比較簡(jiǎn)單，這里我們不過(guò)多的介紹，直接看下面例子：
export default {
props: {
// Basic type check
// ("null "和 "undefined "值允許任何類(lèi)型)
propA: Number,
// 多種可能的類(lèi)型
propB: [String, Number],
// 必傳的參數(shù)
propC: {
type: String,
required: true
},
// 默認(rèn)值
propD: {
type: Number,
default: 100
},
}
}
復(fù)雜類(lèi)型
復(fù)雜類(lèi)型也可以用同樣的方式進(jìn)行驗(yàn)證。
export default {
props: {
// 默認(rèn)值的對(duì)象
propE: {
type: Object,
// 對(duì)象或數(shù)組的默認(rèn)值必須從
// 一個(gè)工廠(chǎng)函數(shù)返回。該函數(shù)接收原始
// 元素作為參數(shù)。
default(rawProps) {
return { message: 'hello' }
}
},
// 數(shù)組默認(rèn)值
propF: {
type: Array,
default() {
return []
}
},
// 函數(shù)默認(rèn)值
propG: {
type: Function,
// 不像對(duì)象或數(shù)組的默認(rèn)值。
// 這不是一個(gè)工廠(chǎng)函數(shù)
// - 這是一個(gè)作為默認(rèn)值的函數(shù)
default() {
return 'Default function'
}
}
}
}
type 可以是以下之一：
- Number
- String
- Boolean
- Array
- Object
- Date
- Function
- Symbol
此外，type? 也可以是一個(gè)自定義的類(lèi)或構(gòu)造函數(shù)，然后使用 instanceof 進(jìn)行檢查。例如，給定下面的類(lèi)：
class Person {
constructor(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
}
我們可以把 Person? 作為一個(gè)類(lèi)型傳遞給 prop 類(lèi)型:
export default {
props: {
author: Person
}
}
高級(jí)驗(yàn)證
validator 方法
Props 支持使用一個(gè) validator 函數(shù)。這個(gè)函數(shù)接受 prop 原始值，并且必須返回一個(gè)布爾值來(lái)確定這個(gè) prop 是否有效。
prop: {
validator(value) {
// The value must match one of these strings
return ['success', 'warning', 'danger'].includes(value)
}
}使用枚舉
有時(shí)我們想把值縮小到一個(gè)特定的集合，這可以通過(guò)枚舉來(lái)實(shí)現(xiàn)：
export const Position = Object.freeze({
TOP: "top",
RIGHT: "right",
BOTTOM: "bottom",
LEFT: "left"
});
它可以導(dǎo)入 validator 中使用，也可以作為默認(rèn)值:
<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>
最后，父級(jí)組件也可以導(dǎo)入并使用這個(gè)枚舉，它消除了我們應(yīng)用程序中對(duì)魔法字符串的使用:
<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>
布爾映射
布爾類(lèi)有獨(dú)特的行為。屬性的存在或不存在可以決定 prop 的值。
<!-- 等價(jià)于 :disabled="true" -->
<MyComponent disabled />
<!-- 價(jià)于 :disabled="false" -->
<MyComponent />
TypeScript
將Vue的內(nèi)置 prop 驗(yàn)證與 TypeScript相結(jié)合，可以讓我們對(duì)這一機(jī)制有更多的控制，因?yàn)門(mén)ypeScript原生支持接口和枚舉。
Interface
我們可以使用一個(gè)接口和 PropType 來(lái)注解復(fù)雜的 prop 類(lèi)型。這確保了傳遞的對(duì)象將有一個(gè)特定的結(jié)構(gòu)。
<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>
枚舉
我們已經(jīng)探討了如何在 JS 中偽造一個(gè)枚舉。這對(duì)于TypeScript來(lái)說(shuō)是不需要的，它本向就支持了：
<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
上述所有內(nèi)容在使用 Vue 3與 選項(xiàng)API 或 組合API 時(shí)都有效。區(qū)別在于使用 <script setup>?時(shí)。props 必須使用 defineProps() 宏來(lái)聲明，如下所示：
<script setup>
const props = defineProps(['foo'])
console.log(props.foo)
</script>
<script setup>
defineProps({
title: String,
likes: Number
})
</script>
或者在使用 TypeScript 的 <script setup> 時(shí)，可以使用純類(lèi)型注解來(lái)聲明 prop:
<script setup lang="ts">
defineProps<{
title?: string
likes?: number
}>()
</script>
或者使用一個(gè)接口:
<script setup lang="ts">
interface Props {
foo: string
bar?: number
}
const props = defineProps<Props>()
</script>
最后，在使用基于類(lèi)型的聲明時(shí)，聲明默認(rèn)值。
<script setup lang="ts">
interface Props {
foo: string
bar?: number
}
const { foo, bar = 100 } = defineProps<Props>()
</script>
總結(jié)
隨著應(yīng)用程序規(guī)模的擴(kuò)大，類(lèi)型檢查是防止錯(cuò)誤的第一道防線(xiàn)。結(jié)合TypeScript，它可以讓你對(duì)正確使用組件接口有很高的信心，減少bug，提高整體代碼質(zhì)量和開(kāi)發(fā)體驗(yàn)。
