vue.js組件參數(shù)怎么校驗(yàn)？組件參數(shù)校驗(yàn)經(jīng)驗(yàn)分享！

在編程學(xué)習(xí)之路上我們會(huì)遇到各種項(xiàng)目和不同的問題，當(dāng)然基礎(chǔ)是比較需要下硬功夫的，那么下面我們來說說“vue.js組件參數(shù)怎么校驗(yàn)？”這個(gè)問題吧！下面是一些相關(guān)經(jīng)驗(yàn)分享，希望對(duì)大家的學(xué)習(xí)有所幫助！

1.什么是組件參數(shù)校驗(yàn)？

什么是組件參數(shù)校驗(yàn)？通俗的來說就是我們?cè)诰幊讨懈附M件向子組件傳遞一些參數(shù)，那么子組件在通過對(duì)數(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>

在父組件傳遞到子組件的必須是一個(gè)字符串。

校驗(yàn)方法：我們通過接收的?props?定義將它稱為對(duì)象，并且指定類型，但是不以數(shù)組的形式接收；我們可以接收字符串類型或者數(shù)組類型都可以。代碼如下：

props:{
　　content:[String, Number]
}

2.復(fù)雜校驗(yàn)

對(duì)于復(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í)，如果子組件恰好聲明了這個(gè)參數(shù)，那么就會(huì)進(jìn)行接收；反之如果是非?props?特性父組件向子組件傳遞參數(shù)的話，而且在子組件沒有?props?這塊內(nèi)容，就會(huì)報(bào)錯(cuò)不會(huì)去接收，所以我們就沒法使用這個(gè)?content?第二個(gè)特點(diǎn)是，子組件沒接收，對(duì)應(yīng)的屬性值會(huì)顯示在標(biāo)簽中，?props?特性就不會(huì)顯示。

以上就是今天小編和大家分享的有關(guān)于“vue.js組件參數(shù)怎么校驗(yàn)？”這問題的一些分享內(nèi)容，當(dāng)然如果你有更好的方法也可以和大家一同分享探討，更對(duì)有關(guān)于vue.js這塊內(nèi)容的相關(guān)知識(shí)我們都可以在W3cschool這個(gè)平臺(tái)中學(xué)習(xí)。