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