此處分為以下5個(gè)部分講
屬性的類型
在組件配置項(xiàng)props中，可以以字符串?dāng)?shù)組形式列出的組件的屬性
舉例??：添加一個(gè)自定義屬性author，并在props中列出來
也可以在props中，以對(duì)象的形式為每個(gè)屬性指定值類型
舉例??：將author的類型設(shè)置為字符串
指定屬性類型的好處
- 相當(dāng)于為組件提供了文檔
- 當(dāng)輸入錯(cuò)誤類型時(shí)侄旬，瀏覽器的控制臺(tái)會(huì)給予提示
靜態(tài)屬性和動(dòng)態(tài)屬性
傳遞靜態(tài)屬性
如上例所森，在使用組件時(shí)，直接在組件上添加屬性author冬耿，并可以為屬性傳遞一個(gè)靜態(tài)屬性值LBJ
傳遞動(dòng)態(tài)屬性
在使用組件時(shí)，可以使用v-bind為屬性動(dòng)態(tài)賦值
可以賦值為一個(gè)數(shù)字萌壳、布爾值亦镶、數(shù)組、對(duì)象等
舉例??：為組件添加一個(gè)動(dòng)態(tài)屬性like讶凉，值為數(shù)字
可以使用不帶參數(shù)的 v-bind染乌，將一個(gè)對(duì)象的所有 property 都作為組件的 prop 傳入
舉例??：在自定義組件my-component上使用v-bind，不帶參數(shù)
可以看到最終的結(jié)果懂讯，傳入的對(duì)象被展開了
單項(xiàng)數(shù)據(jù)流
父級(jí)組件的更新 prop 會(huì)向下流動(dòng)到子組件荷憋，反之則不行，Vue會(huì)發(fā)出警告
舉例??：在子組件中修改title的數(shù)據(jù)
可以看到報(bào)錯(cuò)了：Vue warn]: Attempting to mutate prop "title". Props are readonly.
這其實(shí)時(shí)好的褐望，防止子組件意外變更父級(jí)組件的狀態(tài)勒庄，從而導(dǎo)致應(yīng)用的數(shù)據(jù)流向難以理解
當(dāng)父級(jí)組件的prop值發(fā)生變更，子組件中所有的 prop 都將會(huì)刷新為最新的值
如果真的想在子組件內(nèi)部改變 prop瘫里，官方提供了兩種可能的情形实蔽，及對(duì)應(yīng)的做法
情形1：這個(gè) prop 傳遞一個(gè)初始值作為子組件的一個(gè)本地?cái)?shù)據(jù)
推薦做法：在子組件的data中聲明一個(gè)屬性，值為prop的值
舉例??：父級(jí)組件傳遞initialCounter谨读，子組件聲明另外一個(gè)變量局装，將initialCounter的值賦值過去
以后如果要修改，就直接修改counter
情形2：這個(gè) prop 傳遞一個(gè)初始值需要在子組件中進(jìn)行計(jì)算或轉(zhuǎn)換
推薦做法：在子組件中定義一個(gè)對(duì)應(yīng)的計(jì)算屬性
舉例??：父組件傳遞size，子組件通過計(jì)算屬性重新計(jì)算出一個(gè)值normalizedSize
特別注意铐尚，對(duì)于一個(gè)數(shù)組或?qū)ο箢愋偷?prop拨脉，在子組件中變更這個(gè)對(duì)象或數(shù)組本身，將會(huì)影響到父組件
屬性驗(yàn)證
屬性驗(yàn)證有利于給使用組件的人提供幫助
屬性驗(yàn)證方式
指定驗(yàn)證的方式宣增，只要給組件的配置項(xiàng)props提供一個(gè)特定對(duì)象玫膀，對(duì)象的屬性名即使組件prop，值為對(duì)應(yīng)的驗(yàn)證
舉例??：以下多種驗(yàn)證方式
propA: Number表示propA的值類型是Number
propB: [String, Number]表示propB的值類型是String或Number
propC: {type: String,required: true} 表示類型為String且必填
除此之外以上展示的爹脾，還有其他的驗(yàn)證方式：
propD: {type: Number,default: 1}表示類型為Number且有默認(rèn)值
propE: {type: Object,default() {return {message: 'hello' }}}表示默認(rèn)值為對(duì)象帖旨，注意：對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)函數(shù)獲取
propF: {validator(value) {return ['success','warning', 'danger'].includes(value)}}表示自定義驗(yàn)證函數(shù)
propG:{type:Function,default(){return 'xxx' }}表示類型為函數(shù)且?guī)J(rèn)值
開發(fā)環(huán)境中，當(dāng) prop 驗(yàn)證失敗時(shí)灵妨，Vue會(huì)發(fā)出警告
注意：屬性驗(yàn)證會(huì)在組件實(shí)例創(chuàng)建之前進(jìn)行驗(yàn)證解阅，因此所有的組件實(shí)例的property如data、computed 等闷串， 在 default 或 validator 函數(shù)中是不可用的
type的類型
可以是下列原生構(gòu)造函數(shù)中的一個(gè)：String瓮钥、Number筋量、Boolean烹吵、Array、Object桨武、Date肋拔、Function、Symbol
也可以是一個(gè)自定義的構(gòu)造函數(shù)
舉例??：使用自定義構(gòu)造函數(shù)作為類型
Prop的大小寫命名
HTML中的attribute名是大小寫不敏感呀酸，所以瀏覽器會(huì)把所有大寫字符解釋為小寫
因此凉蜂，在組件注冊時(shí)，prop名使用camelCase (駝峰命名法)性誉，prop的名需要使用與HTML中等價(jià)的寫法
舉例??：使用在注冊組件時(shí)窿吩，prop名是camelCase
如果在字符串模板使用，則沒有這個(gè)限制错览，既可以使用camelCase也可以使用kebab-case
小結(jié)
為了方便纫雁，我將注冊Props相關(guān)內(nèi)容匯總為一圖
為了方便批量下載，我將相關(guān)的高清思維導(dǎo)圖及源文件上傳至GitHub倾哺，可移步下載：https://github.com/jCodeLife/mind-map
