vue prop傳值類型檢驗方式

更新時間：2020年07月30日 09:43:02 作者：龍旗飄揚的艦隊

這篇文章主要介紹了vue prop傳值類型檢驗方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

prop 傳值檢驗規(guī)則

如果是 prop 是靜態(tài)傳值，則必須是 String 類型

如果是 prop 是動態(tài)傳值，則可以驗證任意類型

示例，如果必須要傳一個Number，就必須使用 bind

//聲明
Vue.component("blog-post", {
 props: {
  postTitle: {
   type: Number,
   default: 10000
  }
 },
 template: "<h3>{{ postTitle }}</h3>"
});
//在template中調(diào)用，靜態(tài)傳值，值必定是 String
<blog-post postTitle="54"></blog-post>
//在template中調(diào)用，動態(tài)傳值，值可以是 String、Number、Boolen。。。
<blog-post :postTitle="54"></blog-post>

類型檢查的 type 值，可以是下列原生構造函數(shù)中的一個：

String

Number

Boolean

Array

Object

Date

Function

Symbol

type 還可以是一個自定義的構造函數(shù)，并且通過 instanceof 來進行檢查確認。

示例：

//例如，給定下列現(xiàn)成的構造函數(shù)：
function Person (firstName, lastName) {
 this.firstName = firstName
 this.lastName = lastName
}
//可以使用,檢驗是否為 Person 的實例
Vue.component('blog-post', {
 props: {
  author: Person
 }
})

補充知識：vue中prop驗證、類型檢查及注意事項

1、注意：null和undefined會通過任何類型檢測

2、數(shù)組或?qū)ο箢愋托枰峁┠J值的話需要通過函數(shù)返回。詳情看這里

 props:{// 數(shù)組或?qū)ο蟮哪J值需要通過函數(shù)返回
  authInfo:{
  type:Object,
        default(){
   return{
   name:'張三',
            sex:0
          }
        }
      },
      list:{
  type:Array,
        default(){
   return[
   1,2,3
          ]
        }
      }
    }

3、使用自定義函數(shù)驗證

    props:{
  address:{
  validator(value){
          return ['黑龍江','吉林','遼寧'].indexOf(value) !== -1
        }
      }
    }

4、非prop的特性：若一個屬性傳向一個組件，但是該組件并沒有定義相應 prop。則該屬性稱為非prop特性。非prop特性會作用到組件的根元素上。

若非prop中含有組件跟元素定義的屬性。則非prop中的值會覆蓋組件定義的值（這種情況稱作非prop繼承）。style和class例外，它們會發(fā)生合并。

詳情看這里

不希望非prop繼承該怎么辦？

如果不希望非prop自動作用到組件的根元素上可以在vue的組件選項里添加 inheritAttrs選項（此選項無法影響class和style的綁定）。

inheritAttrs:false

inheritAttrs屬性可以和$attrs配合可以是非prop作用到開發(fā)者想作用到的元素上。而不作用的根元素上。例：

<template>
  <div>
    <input type="text" v-bind="$attrs">  <!--將非prop綁定到此元素-->
  </div>
</template>
<script>
 export default {
 name: "sg-test",
    inheritAttrs:false,//禁止 非prop繼承
 }
</script>

以上這篇vue prop傳值類型檢驗方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: