父子組件溝通原則

為了提高組件的獨立性與重用性，父組件會透過 props 向下傳遞資料給子組件，當子組件有事情要通知父組件時會透過 emit 事件告知父組件，如此確保每個組件都是獨立在相對隔離的環境中運作，可以大幅提高組件的維護性。

ref: http://cn.vuejs.org/v2/guide/components.html#Prop

pass props

此屬性是作為外部傳入資料的接口，為遵循單向資料流，避免子組件無意修改了父組件資料，因此在設計上 props 是單向綁定機制。

• 當父組件更新傳入值的時候，子組件 props 都會更新為最新值
• 子組件不允許直接異動 props 屬性值 (主控台會發出警告訊息)
• 子組件強行修改 props 屬性值時，由於單向資料流的特性，因此是不會異動到父組件的數值。

特別注意若傳入物件或陣列型態資料時，若子組件強行修改 props 值是會異動到父組件的資料喔！

建立子組件

來驗證一下上述特性，首先建立 Product Card 子組件 (ProductCard.vue)，並且建立兩個 props 接受外部傳入之資料，及一個 props 接收外部傳入的方法 。

• type : 表示資料型態 (會進行類型檢測，不符會在主控台發出警告訊息)
• default : 設定預設值 (無傳入資料時，使用預設值)
• required : 是否為必輸入屬性 (預設為 false)

另外有兩的 method 用來強行修改 props 屬性資料

• 修改 string 型態的 props 屬性
• 修改 object 型態的 props 屬性

建立父組件

接著建立 Props Tester 父組件 (ProductTest.vue)，並且使用 Product Card 子組件。

傳入三個 props (string, object and function) 至該組件中

''

在父組件中呈現的畫面如下，上方輸入框呈現父組件資料，皆透過 v-model 雙向綁定各資料；下方則是傳入資料後所呈現出的子組件，皆使用 v-bind 單向綁定傳入 props 的資料。

測試父子互動

當父組件更新傳入值的時候，子組件 props 都會更新為最新值

在子組件修改傳入 props 型態為 string 資料時，系統會發出警告，並且無法異動父組件資料

但在子組件修改傳入 props 型態為 object資料時，可是會直接異動父組件資料(雙向綁定) 喔！

最後點選 More Info 後順利執行父層透過 function props 傳入的方法，並且確實傳入變數至該方法中。

emit event

先前有提到父組件傳入的資料是不行被異動的，因此如果要在子組件操作該資料，並且要在資料異動時通知父組件，讓父組件去做相對應的資料處理時，就要透過 emit 事件通知父層。

如何在子層使用父層傳入的資料？

• 子層內部使用，變動後無須通知父層 :

  簡單定義 data 屬性 internalMadeFrom，將傳入值 madeFrom 作為該值的初始值，後續在子組件就直接操作 internalMadeFrom 即可。

• 父子共用，異動必須通知父層 :

  定義 computed 計算屬性 clonedMadeFrom，在 getter 中直接取用 props 傳入 madeFrom 資料，在 setter 中直接將異動後新值透過 emit 發送特定事件讓父層接收(可透過此機制讓父層更新 madeFrom 值，再透過 prop 傳遞新值進子組件，更新子層 madeFrom 資料，就類似雙向綁定作用)，後續在子組件就直接操作 clonedMadeFrom 即可。