一、Props 聲明

• 一個(gè)組件需要顯式聲明它所接受的 props，這樣 Vue 才能知道外部傳入的哪些是 props，哪些是透?jìng)?attribute
• 在使用 <script setup> 的單文件組件中，props 可以使用 defineProps() 宏來聲明：
  
• 在沒有使用 <script setup> 的組件中，prop 可以使用 props 選項(xiàng)來聲明：
  
• 注意傳遞給 defineProps() 的參數(shù)和提供給 props 選項(xiàng)的值是相同的，兩種聲明方式背后其實(shí)使用的都是 prop 選項(xiàng)。
• 除了使用字符串?dāng)?shù)組來聲明 prop 外，還可以使用對(duì)象的形式：
  
  
• 對(duì)于以對(duì)象形式聲明中的每個(gè)屬性，key 是 prop 的名稱，而值則是該 prop 預(yù)期類型的構(gòu)造函數(shù)。
• 對(duì)象形式的 props 聲明不僅可以一定程度上作為組件的文檔，而且如果其他開發(fā)者在使用你的組件時(shí)傳遞了錯(cuò)誤的類型，也會(huì)在瀏覽器控制臺(tái)中拋出警告。
• 如果你正在搭配 TypeScript 使用 <script setup>，也可以使用類型標(biāo)注來聲明 props：
  

二、傳遞 prop 的細(xì)節(jié)

1、Prop 名字格式

• 如果一個(gè) prop 的名字很長，應(yīng)使用 camelCase 形式，因?yàn)樗鼈兪呛戏ǖ?JavaScript 標(biāo)識(shí)符，可以直接在模板的表達(dá)式中使用，也可以避免在作為屬性 key 名時(shí)必須加上引號(hào)。
  
  
• 雖然理論上你也可以在向子組件傳遞 props 時(shí)使用 camelCase 形式 (使用 DOM 模板時(shí)例外)，但實(shí)際上為了和 HTML attribute 對(duì)齊，我們通常會(huì)將其寫為 kebab-case 形式：
  
• 對(duì)于組件名我們推薦使用 PascalCase，因?yàn)檫@提高了模板的可讀性，能幫助我們區(qū)分 Vue 組件和原生 HTML 元素。
• 然而對(duì)于傳遞 props 來說，使用 camelCase 并沒有太多優(yōu)勢(shì)，因此我們推薦更貼近 HTML 的書寫風(fēng)格。

2、靜態(tài) vs. 動(dòng)態(tài) Prop

• 靜態(tài)值形式的 props：
  
• 相應(yīng)地，還有使用 v-bind 或縮寫 : 來進(jìn)行動(dòng)態(tài)綁定的 props：
  

3、傳遞不同的值類型

• 任何類型的值都可以作為 props 的值被傳遞。
  
  
  
  

4、使用一個(gè)對(duì)象綁定多個(gè) prop

• 如果你想要將一個(gè)對(duì)象的所有屬性都當(dāng)作 props 傳入，你可以使用沒有參數(shù)的 v-bind，即只使用 v-bind 而非 :prop-name。
  
• 以及下面的模板：
  
• 而這實(shí)際上等價(jià)于：
  

三、單向數(shù)據(jù)流

• 所有的 props 都遵循著單向綁定原則，props 因父組件的更新而變化，自然地將新的狀態(tài)向下流往子組件，而不會(huì)逆向傳遞。
• 這避免了子組件意外修改父組件的狀態(tài)的情況，不然應(yīng)用的數(shù)據(jù)流將很容易變得混亂而難以理解。
• 另外，每次父組件更新后，所有的子組件中的 props 都會(huì)被更新到最新值，這意味著你不應(yīng)該在子組件中去更改一個(gè) prop。
• 若你這么做了，Vue 會(huì)在控制臺(tái)上向你拋出警告：
  

1、導(dǎo)致你想要更改一個(gè) prop 的需求通常來源于以下兩種場(chǎng)景：

• prop 被用于傳入初始值；而子組件想在之后將其作為一個(gè)局部數(shù)據(jù)屬性。在這種情況下，最好是新定義一個(gè)局部數(shù)據(jù)屬性，從 props 上獲取初始值即可：
  
• 需要對(duì)傳入的 prop 值做進(jìn)一步的轉(zhuǎn)換。在這種情況中，最好是基于該 prop 值定義一個(gè)計(jì)算屬性：
  

2、更改對(duì)象 / 數(shù)組類型的 props（盡可能避免這樣的更改）

• 當(dāng)對(duì)象或數(shù)組作為 props 被傳入時(shí)，雖然子組件無法更改 props 綁定，但仍然可以更改對(duì)象或數(shù)組內(nèi)部的值。
• 這是因?yàn)?JavaScript 的對(duì)象和數(shù)組是按引用傳遞，而對(duì) Vue 來說，禁止這樣的改動(dòng)雖然可能，但有很大的性能損耗，比較得不償失。
• 這種更改的主要缺陷是它允許了子組件以某種不明顯的方式影響父組件的狀態(tài)，可能會(huì)使數(shù)據(jù)流在將來變得更難以理解。
• 在最佳實(shí)踐中，你應(yīng)該盡可能避免這樣的更改，除非父子組件在設(shè)計(jì)上本來就需要緊密耦合。
• 在大多數(shù)場(chǎng)景下，子組件應(yīng)該拋出一個(gè)事件來通知父組件做出改變。

四、Prop 校驗(yàn)

• Vue 組件可以更細(xì)致地聲明對(duì)傳入的 props 的校驗(yàn)要求。
• 比如我們上面已經(jīng)看到過的類型聲明，如果傳入的值不滿足類型要求，Vue 會(huì)在瀏覽器控制臺(tái)中拋出警告來提醒使用者。
• 要聲明對(duì) props 的校驗(yàn)，你可以向 defineProps() 宏提供一個(gè)帶有 props 校驗(yàn)選項(xiàng)的對(duì)象，例如：
  
  

一些補(bǔ)充細(xì)節(jié)文章來源地址http://www.zghlxwxcb.cn/news/detail-406461.html

• 所有 prop 默認(rèn)都是可選的，除非聲明了 required: true。
• 除 Boolean 外的未傳遞的可選 prop 將會(huì)有一個(gè)默認(rèn)值 undefined。
• Boolean 類型的未傳遞 prop 將被轉(zhuǎn)換為 false。這可以通過為它設(shè)置 default 來更改——例如：設(shè)置為 default: undefined 將與非布爾類型的 prop 的行為保持一致。
• 如果聲明了 default 值，那么在 prop 的值被解析為 undefined 時(shí)，無論 prop 是未被傳遞還是顯式指明的 undefined，都會(huì)改為 default 值。
• 當(dāng) prop 的校驗(yàn)失敗后，Vue 會(huì)拋出一個(gè)控制臺(tái)警告 (在開發(fā)模式下)。

到了這里，關(guān)于Vue3——第十二章（Props）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！