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