[TOC] #### 1. props 選項概述 --- props 選項的值可以是數(shù)組或?qū)ο螅糜诮邮諄碜愿附M件的數(shù)據(jù) 當(dāng) props 的值為一個對象時，可以配置高級選項，如：類型檢測、自定義驗證、設(shè)置默認(rèn)值 當(dāng) props 的值為一個簡單的數(shù)組時，鍵值是接收的屬性名，如果父組件沒有傳遞該屬性，屬性值為 undefined #### 2. props 用法詳解 --- props 基于對象的語法可以使用以下選項： | 選項 | 描述 | 取值 | | ------------ | ------------ | ------------ | | type | 類型檢測 | 原生構(gòu)造函數(shù)，如：String，Array，Object 等 | | default | 默認(rèn)值 | Any，父組件沒有傳入 prop 時的默認(rèn)值，對象或數(shù)組必須用一個工廠函數(shù)返回 | | required | 是否必傳 | Boolean。和 default 選項二選一使用即可 | | validator | 自定義驗證函數(shù) | Function，函數(shù)的參數(shù)是 prop 的值 | prop 會在組件實例創(chuàng)建之前進(jìn)行驗證，所以實例的選項 data、computed 等在 default 和 validator 函數(shù)中是不可用的 ```javascript export default { props: { // 只檢測類型 name: String, // 多個可能的類型 likes: [String, Array], // 檢測類型 + 默認(rèn)值 age: { type: Number, default: 18, }, // 檢測類型 + 必傳項 gender: { type: String, required: true, }, // 檢測類型 + 自定義驗證函數(shù) phone: { type: String, validator(val) { return /^1[3456789]\d{9}$/.test(val); }, }, } } ``` #### 3. props 書寫規(guī)范 --- html 屬性名對大小寫是不敏感的，瀏覽器會把所有大寫字符解釋為小寫字符 如果 props 中的屬性名為多個單詞，使用小駝峰命名法，父組件傳入 prop 時使用其對應(yīng)短橫線命名法的屬性名 ```javascript export default { props: { userInfo: { type: Object, default() { return {}; }, }, }, } ``` ```html <test :user-info="{ id: 1, name: 'liang' }"></test> ``` #### 4. props 傳值語法 --- **傳遞靜態(tài)或動態(tài) prop** 傳入一個靜態(tài)的值 ```html <liang title="Hello Vue !"></liang> ``` 使用 v-bind 指令進(jìn)行動態(tài)傳值 ```html <!-- 動態(tài)賦予一個變量的值 --> <liang :title="form.title"></liang> <!-- 動態(tài)賦予一個復(fù)雜表達(dá)式的值 --> <liang :title="form.title + ' by ' + article.name"></liang> ``` **傳入一個數(shù)字** 即使 20 是靜態(tài)的，仍然需要使用 v-bind 來告訴 Vue 這是一個 JS 表達(dá)式，而不是一個字符串 ```html <!-- 子組件 props 接收到的 age 是 String 類型 --> <liang age="20"></liang> <!-- 子組件 props 接收到的 age 是 Number 類型 --> <liang v-bind:age="20"></liang> ``` **傳入一個布爾值** ```html <!-- 父組件傳入 prop 沒有值時需要分兩種情況 --> <!-- 子組件 props 中 disabled 的 type 定義的是 Boolean 類型，接收到的就是 true --> <!-- 子組件 props 中 disabled 的 type 定義的不是 Boolean 類型，接收到的就是空字符串 --> <liang disabled></liang> <!-- 父組件傳入布爾值時也必須使用 v-bind 語法，否則子組件接收到的是字符串 --> <liang :disabled="false"></liang> ``` **傳入一個數(shù)組或?qū)ο?* ```html <liang :ids="[1, 2, 3]"></liang> <liang :user-info="{ id: 1, name: 'liang' }"></liang> ``` #### 5. 單向數(shù)據(jù)流 --- 父子組件的 prop 之間形成了一個 **單行下行綁定**。父級 prop 的更新會向下流動到子組件中，但反過來則不行。這樣會 **防止從子組件意外變更父組件的狀態(tài)**，從而導(dǎo)致應(yīng)用的數(shù)據(jù)流向難以理解 父組件中的 prop 數(shù)據(jù)發(fā)生變更時，子組件中所有的 prop 都將跟著刷新為最新的值。意味著 **不應(yīng)該在子組件內(nèi)部改變 prop**，如果這樣做了，Vue 將會在控制臺發(fā)出警告 下面是在子組件中試圖變更 prop 的情形： **一、將 prop 作為初始值傳遞到 data 選項中** 在子組件中不能直接修改 prop 的值，但是可以將 prop 作為初始值傳遞到 data 選項中，修改 data 選項的值 ```javascript export default { props: { num: Number, }, data() { return { count: this.num, }; }, methods: { btnClick() { this.count++; }, } } ``` **二、需要將 prop 進(jìn)行轉(zhuǎn)換處理，最好使用這個 prop 值定義一個計算屬性** ```javascript export default { props: { num: Number, }, computed: { countAdd() { return this.num + 2; }, }, } ```