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