Vue的子組件props如何設置多個校驗類型

更新時間：2023年03月11日 11:17:21 作者：小火車況且況且

這篇文章主要介紹了Vue的子組件props如何設置多個校驗類型問題。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue子組件props設置多個校驗值

1. type使用 | 進行隔開

props: {
? ? iconClass: {
? ? ? type: String | null,
? ? ? required: true,
? ? ? default: ""
? ? }
},

2. 使用數(shù)組

props: {
? iconClass: [String , null]
},

3. 使用validator校驗函數(shù)

props: {
?? ?iconClass: {
?? ? ? ?validator: (value)=> {
?? ? ? ? ?const getResult = Object.prototype.toString.call(value)
?? ? ? ? ?if(getResult === "[object Null]" || getResult === "[object String]") return true;
?? ? ? ?},
?? ? ? ?required: true,
?? ? ? ?default: ""
? },
}

vue組件參數(shù)校驗

在vue中,當父組件向子組件傳遞值時.子組件可以對傳遞過來的值進行參數(shù)校驗.

首先我們定義一個子組件child,接受父組件傳遞過來的值content.

<child :content="1"></child>

Vue.component('child',{
? ? ? ? ? ? ? props:['content'],
? ? ? ? ? ? ? template: "<div>{{content}}</div>",
? ? ? ? ? })

注意但我們在content前面加上:,它會認為這是js表達式,所以認為"1"是Number類型而不是String類型.

參數(shù)校驗一

限定參數(shù)的類型

<child :content="1"></child>

Vue.component('child',{
? ? ? ? ? ? ? props:{
? ? ? ? ? ? ? ?content: [String,Number], ? //這樣就限制了參數(shù)的類型為String或者Number.
? ? ? ? ? ? ?},
? ? ? ? ? ? ? template: "<div>{{content}}</div>",
? ? ? ? ? })

如果不滿足則會報[Vue warn]: Invalid prop: type check failed for prop “content”. Expected String, got Number.

參數(shù)校驗二

限定參數(shù)的類型，是否必須，默認值

?Vue.component('child',{
? ? ? ? ? ? ? props:{
? ? ? ? ? ? ? ? ?content:{
? ? ? ? ? ? ? ? ? ? ?type:Number, ? //限制參數(shù)的類型為Number
? ? ? ? ? ? ? ? ? ? ?default:100, ? //設置參數(shù)的默認值為100
? ? ? ? ? ? ? ? ? ? ?required:false, ?//是否必須
? ? ? ? ? ? ? ? ?}?
? ? ? ? ? ? ? },
? ? ? ? ? ? ? template: "<div>{{content}}</div>",
? ? ? ? ? })

參數(shù)校驗三

自定義校驗規(guī)則

Vue.component('child',{
? ? ? ? ? ? ? props:{
? ? ? ? ? ? ? ? ?content:{
? ? ? ? ? ? ? ? ? ? ?type:Number,
? ? ? ? ? ? ? ? ? ? ?default:100,
? ? ? ? ? ? ? ? ? ? ?required:false,
? ? ? ? ? ? ? ? ? ? ?validator:function(value){ ? //自定義校驗的規(guī)則
? ? ? ? ? ? ? ? ? ? ? ? ?return value>5;
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? },
? ? ? ? ? ? ? template: "<div>{{content}}</div>",
? ? ? ? ? })