vue.js組件參數如何校驗

本篇內容主要講解“vue.js組件參數如何校驗”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue.js組件參數如何校驗”吧!

1.什么是組件參數校驗？

什么是組件參數校驗？通俗的來說就是我們在編程中父組件向子組件傳遞一些參數，那么子組件在通過對數據進行校驗，這就被稱為組件參數校驗。下面是校驗的相關代碼：

<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定義將它稱為對象，并且指定類型，但是不以數組的形式接收；我們可以接收字符串類型或者數組類型都可以。代碼如下：

props:{
　　content:[String, Number]
}

2.復雜校驗

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

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

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

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

到此，相信大家對“vue.js組件參數如何校驗”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！