在編程學(xué)習(xí)之路上我們會遇到各種項(xiàng)目和不同的問題，當(dāng)然基礎(chǔ)是比較需要下硬功夫的，那么下面我們來說說“vue.js組件參數(shù)怎么校驗(yàn)？”這個問題吧！下面是一些相關(guān)經(jīng)驗(yàn)分享，希望對大家的學(xué)習(xí)有所幫助！
1.什么是組件參數(shù)校驗(yàn)？
什么是組件參數(shù)校驗(yàn)？通俗的來說就是我們在編程中父組件向子組件傳遞一些參數(shù)，那么子組件在通過對數(shù)據(jù)進(jìn)行校驗(yàn)，這就被稱為組件參數(shù)校驗(yàn)。下面是校驗(yàn)的相關(guān)代碼：
<div id='root'>
<child content='hello world'></child>
</div>
<script>
Vue.component('child',{
props:{
content:String
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:'#root'
})
</script>
在父組件傳遞到子組件的必須是一個字符串。
校驗(yàn)方法：我們通過接收的?props?定義將它稱為對象，并且指定類型，但是不以數(shù)組的形式接收；我們可以接收字符串類型或者數(shù)組類型都可以。代碼如下：
props:{
content:[String, Number]
}2.復(fù)雜校驗(yàn)
對于復(fù)雜的校驗(yàn)我們看下這串代碼：
<div id='root'>
<child content='hello world'></child>
</div>
<script>
Vue.component('child',{
props:{
content:{
type:String,//數(shù)據(jù)類型
required:false,//是否是必傳
default:'default content',//如果沒傳值，默認(rèn)值
validator:function(val){//自定義校驗(yàn)器,數(shù)據(jù)必須>5
return (val.length>5)
}
}
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:'#root'
})
</script>我們知道在?props?的特性父組件向子組件傳遞參數(shù)時，如果子組件恰好聲明了這個參數(shù)，那么就會進(jìn)行接收；反之如果是非?props?特性父組件向子組件傳遞參數(shù)的話，而且在子組件沒有?props?這塊內(nèi)容，就會報錯不會去接收，所以我們就沒法使用這個?content?第二個特點(diǎn)是，子組件沒接收，對應(yīng)的屬性值會顯示在標(biāo)簽中，?props?特性就不會顯示。
總結(jié)：
以上就是今天小編和大家分享的有關(guān)于“vue.js組件參數(shù)怎么校驗(yàn)？”這問題的一些分享內(nèi)容，當(dāng)然如果你有更好的方法也可以和大家一同分享探討，更對有關(guān)于vue.js這塊內(nèi)容的相關(guān)知識我們都可以在W3cschool這個平臺中學(xué)習(xí)。
