Vue的子組件props怎么設置多個校驗類型

本篇內容主要講解“Vue的子組件props怎么設置多個校驗類型”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue的子組件props怎么設置多個校驗類型”吧!

vue子組件props設置多個校驗值

1. type使用 | 進行隔開

props: {
    iconClass: {
      type: String | null,
      required: true,
      default: ""
    }
},

2. 使用數組

props: {
  iconClass: [String , null]
},

3. 使用validator校驗函數

props: {
    iconClass: {
        validator: (value)=> {
          const getResult = Object.prototype.toString.call(value)
          if(getResult === "[object Null]" || getResult === "[object String]") return true;
        },
        required: true,
        default: ""
  },
}

Vue組件參數校驗

在vue中,當父組件向子組件傳遞值時.子組件可以對傳遞過來的值進行參數校驗.

首先我們定義一個子組件child,接受父組件傳遞過來的值content.

<child :content="1"></child>

Vue.component('child',{
              props:['content'],
              template: "<div>{{content}}</div>",
          })

注意但我們在content前面加上:,它會認為這是js表達式,所以認為"1"是Number類型而不是String類型.

參數校驗一

限定參數的類型

<child :content="1"></child>

Vue.component('child',{
              props:{
               content: [String,Number],   //這樣就限制了參數的類型為String或者Number.
             },
              template: "<div>{{content}}</div>",
          })

如果不滿足則會報[Vue warn]: Invalid prop: type check failed for prop “content”. Expected String, got Number.

參數校驗二

限定參數的類型，是否必須，默認值

 Vue.component('child',{
              props:{
                 content:{
                     type:Number,   //限制參數的類型為Number
                     default:100,   //設置參數的默認值為100
                     required:false,  //是否必須
                 } 
              },
              template: "<div>{{content}}</div>",
          })

參數校驗三

自定義校驗規則

Vue.component('child',{
              props:{
                 content:{
                     type:Number,
                     default:100,
                     required:false,
                     validator:function(value){   //自定義校驗的規則
                         return value>5;
                     }
                 }
              },
              template: "<div>{{content}}</div>",
          })

到此，相信大家對“Vue的子組件props怎么設置多個校驗類型”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！