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 值，可以是下列原生構(gòu)造函數(shù)中的一個：

String

Number

Boolean

Array

Object

Date

Function

Symbol

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

示例：

//例如，給定下列現(xiàn)成的構(gòu)造函數(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(rèn)值的話需要通過函數(shù)返回。詳情看這里

props:{// 數(shù)組或?qū)ο蟮哪J(rèn)值需要通過函數(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的特性：若一個屬性傳向一個組件，但是該組件并沒有定義相應(yīng) 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)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。