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

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

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

什么是組件參數(shù)校驗？通俗的來說就是我們在編程中父組件向子組件傳遞一些參數(shù)，那么子組件在通過對數(shù)據(jù)進行校驗，這就被稱為組件參數(shù)校驗。下面是校驗的相關(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>

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

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

props:{
　　content:[String, Number]
}

2.復雜校驗

對于復雜的校驗我們看下這串代碼：

<div id='root'>
　　<child content='hello world'></child>
</div>

<script>
Vue.component('child',{
　　props:{
　　　　content:{
　　　　　　type:String,//數(shù)據(jù)類型
　　　　　　required:false,//是否是必傳
　　　　　　default:'default content',//如果沒傳值，默認值
　　　　　　validator:function(val){//自定義校驗器,數(shù)據(jù)必須>5
　　　　　　　　return (val.length>5)
　　　　　　}
　　　　}
　　},
　　template:'<div>{{content}}</div>'
})
var vm = new Vue({
　　el:'#root'
})
</script>

我們知道在?props?的特性父組件向子組件傳遞參數(shù)時，如果子組件恰好聲明了這個參數(shù)，那么就會進行接收；反之如果是非?props?特性父組件向子組件傳遞參數(shù)的話，而且在子組件沒有?props?這塊內(nèi)容，就會報錯不會去接收，所以我們就沒法使用這個?content?第二個特點是，子組件沒接收，對應的屬性值會顯示在標簽中，?props?特性就不會顯示。

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