在編程學習之路上我們會遇到各種項目和不同的問題,當然基礎是比較需要下硬功夫的,那么下面我們來說說“vue.js組件參數(shù)怎么校驗?”這個問題吧!下面是一些相關經驗分享,希望對大家的學習有所幫助!
1.什么是組件參數(shù)校驗?
什么是組件參數(shù)校驗?通俗的來說就是我們在編程中父組件向子組件傳遞一些參數(shù),那么子組件在通過對數(shù)據(jù)進行校驗,這就被稱為組件參數(shù)校驗。下面是校驗的相關代碼:
<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
?這塊內容,就會報錯不會去接收,所以我們就沒法使用這個?content
?第二個特點是,子組件沒接收,對應的屬性值會顯示在標簽中,?props
?特性就不會顯示。
總結:
以上就是今天小編和大家分享的有關于“vue.js組件參數(shù)怎么校驗?”這問題的一些分享內容,當然如果你有更好的方法也可以和大家一同分享探討,更對有關于vue.js這塊內容的相關知識我們都可以在W3cschool這個平臺中學習。