App下載

vue.js組件參數(shù)怎么校驗?組件參數(shù)校驗經驗分享!

猿友 2021-06-21 09:46:43 瀏覽數(shù) (2705)
反饋

在編程學習之路上我們會遇到各種項目和不同的問題,當然基礎是比較需要下硬功夫的,那么下面我們來說說“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這個平臺中學習。


0 人點贊