Vue子組件內(nèi)的props對象參數(shù)配置方法

第Vue子組件內(nèi)的props對象參數(shù)配置方法目錄一、簡單數(shù)據(jù)類型1、布爾類型Boolean正確寫法：2、數(shù)字類型Number正確寫法：3、字符串類型String正確寫法：二、復(fù)雜數(shù)據(jù)類型1、數(shù)組Array錯(cuò)誤寫法：Eslint語法報(bào)錯(cuò)：正確的常規(guī)寫法：或是用箭頭函數(shù)：2、對象Object錯(cuò)誤寫法：正確的常規(guī)寫法：3、函數(shù)Function正確寫法：這篇文章主要介紹了Vue子組件內(nèi)的props對象里的default參數(shù)是如何定義

Array、Object、或Function默認(rèn)值的正確寫法說明，具有很好的參考價(jià)值

一、簡單數(shù)據(jù)類型

1、布爾類型Boolean

正確寫法：

props:{

demoBoo:{

type:Boolean,

default:true,

},

2、數(shù)字類型Number

正確寫法：

props:{

demoNum:{

type:Number,

default:1,

},

3、字符串類型String

正確寫法：

props:{

demoStr:{

type:String,

default:'hello',

},

二、復(fù)雜數(shù)據(jù)類型

1、數(shù)組Array

錯(cuò)誤寫法：

props:{

demoArr:{

typeof:Array,

default:[],

},

Eslint語法報(bào)錯(cuò)：

Invaliddefaultvalueforpropdemo:PropswithtypeObject/Arraymustuseafactoryfunctiontoreturnthedefaultvalue.

正確的常規(guī)寫法：

props:{

demoArr:{

type:Array,

default:function(){

return[];

},

或是用箭頭函數(shù)：

props:{

demoArr:{

type:Array,

default:()=[],

},

2、對象Object

錯(cuò)誤寫法：

props:{

demoObj:{

type:Object,

default:()={},

},

正確的常規(guī)寫法：

props:{

demoObj:{

type:Object,

default:function(){

return{};

},

或是用箭頭函數(shù)：（注意：這里的對象一定要用小括號包裹起來({})）

props:{

demoObj:{

type:Object,

default:()=({}),

},

3、函數(shù)Function

正確寫法：

props:{

demoFun:{

type:Function,

default:()={},

},

補(bǔ)充知識：Vue傳參props里面為什么要帶type,還有default

這個(gè)是子組件,寫type的意思是swiperDate傳過來的數(shù)據(jù)類型是數(shù)組,