在 Vue 中，父子組件的關係可以總結為 props down, events up 。父組件通過 props 向下傳遞數據給子組件，子組件通過 events 給父組件發送消息。

使用Props傳遞數據

組件實例的作用域是孤立的。這意味著不能並且不應該在子組件的模板內直接引用父組件的數據。可以使用 props 把數據傳給子組件。

舉個栗子：

camelCase(駝峰命名法) vs. kebab-case(短橫線命名法)

因為HTML 特性不區分大小寫。當使用非字符串模版時，名字形式為 camelCase(駝峰命名法) 的 prop 用作特性時，需要轉為 kebab-case(短橫線命名法)（短橫線隔開）：

動態 Props

類似於用 v-bind 綁定 HTML 特性到一個表達式，也可以用 v-bind 綁定動態 props 到父組件的數據。每當父組件的數據變化時，也會傳導給子組件：

字面量語法 vs 動態語法

初學者常犯的一個錯誤是使用字面量語法傳遞數值：

因為它是一個字面 prop ，它的值以字符串 “1”。如果想傳遞一個實際的數字，需要使用 v-bind ，從而讓它的值被當作 JavaScript 表達式計算：

單向數據流

prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解。

另外，每次父組件更新時，子組件的所有 prop 都會更新為最新值。這意味著你不應該在子組件內部改變 prop 。如果你這麼做了，Vue 會在控制檯給出警告。

通常有兩種改變 prop 的情況：

prop 作為初始值傳入，子組件之後只是將它的初始值作為本地數據的初始值使用；

prop 作為需要被轉變的原始值傳入。

更確切的說這兩種情況是：

定義一個局部 data 屬性，並將 prop 的初始值作為局部數據的初始值。

定義一個 computed 屬性，此屬性從 prop 的值計算得出。

注意在 JavaScript 中對象和數組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。

Prop 驗證

組件可以為 props 指定驗證要求。如果未指定驗證要求，Vue 會發出警告。當組件給其他人使用時這很有用。

prop 是一個對象而不是字符串數組時，它包含驗證要求：

type 可以是下面原生構造器：

• String

• Number

• Boolean

• Function

• Object

• Array

type 也可以是一個自定義構造器，使用 instanceof 檢測。

當 prop 驗證失敗了， Vue 將拒絕在子組件上設置此值，如果使用的是開發版本會拋出一條警告。

相關推薦：

閱讀更多 看到他請叫他快去學習 的文章

關鍵字: 組件 技術 JavaScript