vue prop傳值類(lèi)型檢驗(yàn)方式
prop 傳值檢驗(yàn)規(guī)則
如果是 prop 是靜態(tài)傳值，則必須是 String 類(lèi)型
如果是 prop 是動(dòng)態(tài)傳值，則可以驗(yàn)證任意類(lèi)型
示例，如果必須要傳一個(gè)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)用，動(dòng)態(tài)傳值，值可以是 String、Number、Boolen。。。
<blog-post :postTitle="54"></blog-post>
類(lèi)型檢查的 type 值，可以是下列原生構(gòu)造函數(shù)中的一個(gè)：
String
Number
Boolean
Array
Object
Date
Function
Symbol
type 還可以是一個(gè)自定義的構(gòu)造函數(shù)，并且通過(guò) instanceof 來(lái)進(jìn)行檢查確認(rèn)。
示例：
//例如，給定下列現(xiàn)成的構(gòu)造函數(shù)：
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
//可以使用,檢驗(yàn)是否為 Person 的實(shí)例
Vue.component('blog-post', {
props: {
author: Person
}
})
補(bǔ)充知識(shí)：vue中prop驗(yàn)證、類(lèi)型檢查及注意事項(xiàng)
1、注意：null和undefined會(huì)通過(guò)任何類(lèi)型檢測(cè)
2、數(shù)組或?qū)ο箢?lèi)型需要提供默認(rèn)值的話(huà)需要通過(guò)函數(shù)返回。詳情看這里
props:{// 數(shù)組或?qū)ο蟮哪J(rèn)值需要通過(guò)函數(shù)返回
authInfo:{
type:Object,
default(){
return{
name:'張三',
sex:0
}
}
},
list:{
type:Array,
default(){
return[
1,2,3
]
}
}
}
3、使用自定義函數(shù)驗(yàn)證
props:{
address:{
validator(value){
return ['黑龍江','吉林','遼寧'].indexOf(value) !== -1
}
}
}
4、非prop的特性：若一個(gè)屬性傳向一個(gè)組件，但是該組件并沒(méi)有定義相應(yīng) prop。則該屬性稱(chēng)為非prop特性。非prop特性會(huì)作用到組件的根元素上。
若非prop中含有組件跟元素定義的屬性。則非prop中的值會(huì)覆蓋組件定義的值（這種情況稱(chēng)作 非prop繼承）。style和class例外，它們會(huì)發(fā)生合并。
不希望非prop繼承該怎么辦？
如果不希望非prop自動(dòng)作用到組件的根元素上可以在vue的組件選項(xiàng)里添加 inheritAttrs選項(xiàng)（此選項(xiàng)無(wú)法影響class和style的綁定）。
inheritAttrs:false
inheritAttrs屬性可以和$attrs配合可以是非prop作用到開(kāi)發(fā)者想作用到的元素上。而不作用的根元素上。例：
<template>
<div>
<input type="text" v-bind="$attrs"> <!--將非prop綁定到此元素-->
</div>
</template>
<script>
export default {
name: "sg-test",
inheritAttrs:false,//禁止 非prop繼承
}
</script>
以上這篇vue prop傳值類(lèi)型檢驗(yàn)方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue網(wǎng)絡(luò)請(qǐng)求的三種實(shí)現(xiàn)方式介紹
這篇文章主要介紹了Vue網(wǎng)絡(luò)請(qǐng)求的三種實(shí)現(xiàn)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
vuex頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題的四種解決方式
vuex是大家使用vue時(shí)大多數(shù)都會(huì)選擇的,但是當(dāng)頁(yè)面刷新之后vuex數(shù)據(jù)會(huì)丟失,下面這篇文章主要給大家介紹了關(guān)于vuex頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題的四種解決方式,需要的朋友可以參考下2022-02-02
Vue與compressor.js實(shí)現(xiàn)高效文件壓縮的方法
本文將介紹基于 Vue 框架和 compressor.js 的上傳時(shí)文件壓縮實(shí)現(xiàn)方法,通過(guò)在上傳過(guò)程中對(duì)文件進(jìn)行壓縮,減小文件大小,提升上傳速度,為用戶(hù)創(chuàng)造更快捷、高效的上傳體驗(yàn),感興趣的朋友跟隨小編一起看看吧2024-03-03
在使用vue框架的過(guò)程中,我們經(jīng)常需要給一些數(shù)據(jù)做一些初始化處理,這時(shí)候我們常用的就是在created與mounted選項(xiàng)中作出處理,這篇文章主要給大家介紹了關(guān)于Vue中created與mounted區(qū)別的相關(guān)資料,其中部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的,需要的朋友可以參考下2022-06-06
vue.js實(shí)現(xiàn)簡(jiǎn)易折疊面板
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易折疊面板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
開(kāi)發(fā)項(xiàng)目有一段時(shí)間了,隨著項(xiàng)目越來(lái)越大,打包的時(shí)間也相應(yīng)的變長(zhǎng)了,打包時(shí)的內(nèi)存也增多了,這時(shí)候產(chǎn)生了一個(gè)問(wèn)題,在發(fā)布項(xiàng)目的時(shí)候,會(huì)出現(xiàn)Vue熱更新出現(xiàn)內(nèi)存溢出的問(wèn)題,所以本文給大家介紹了Vue熱更新出現(xiàn)內(nèi)存溢出的解決方法,需要的朋友可以參考下2024-05-05
在本篇文章里小編給大家整理了關(guān)于vue中nextTick用法實(shí)例以及相關(guān)代碼內(nèi)容，需要的朋友們可以參考下。2019-09-09
詳解實(shí)現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理
這篇文章主要介紹了詳解實(shí)現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本篇文章主要介紹了Vue-基本標(biāo)簽和自定義控件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
vue elementUI table表格自定義樣式滾動(dòng)效果
這篇文章主要介紹了vue elementUI table表格自定義樣式滾動(dòng)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08