prop 傳值檢驗規則

如果是 prop 是靜態傳值，則必須是 String 類型

如果是 prop 是動態傳值，則可以驗證任意類型

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

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

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

String

Number

Boolean

Array

Object

Date

Function

Symbol

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

示例：

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

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

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

2、數組或對象類型需要提供默認值的話需要通過函數返回。詳情看這里

props:{// 數組或對象的默認值需要通過函數返回 authInfo:{ type:Object,default(){ return{ name:’張三’, sex:0 }} }, list:{ type:Array,default(){ return[ 1,2,3 ]} } }

3、使用自定義函數驗證

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

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

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

詳情看這里

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

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

inheritAttrs:false

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

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

以上這篇vue prop傳值類型檢驗方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。