Vue.js 在各組件之間的傳遞方式

相信對於沒有用過 react 的人對於 Vue 的單向資訊流應該是理解概念但卻不知道該從何下手，尤其是在各組件（Component）間的溝通（props），本文將會用來介紹一些常用於組件間的溝通方式，也順便先預習一下 Vue 2.0 將帶來的變革。

首先先來定義一下什麼是父組件與子組件的概念，你可以把各個組件想像成主機，當 A 主機向 B 主機要求資料時，我們就會定義 A 主機為高階組件。這只是簡單的舉例，而實際上高、低階是經由相對比較而來的。

# 父與子

不論是在 Vue.js 或是 react 中都有一個很重要的觀念 —— 組件（以下為官方說明）

組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。

組件的作用域是孤立的，這意味著我們必須遵守最小知識原則（Least Knowledge Principle），以期每個組件間都能夠以該組件所要的最小資訊來驅動他，使得組件能夠重複利用。

PS：SOLID 果然是心法口訣啊～

這意味著我們並不應該在子組件直接呼叫父組件的內容，而是利用 “props” 期望從父組件中傳遞值下來，如此一來我們便建立了單一資訊流，而非 global 變數在整段程式碼中到處作用造成難以維護的情形。

以下展示一個簡單的範例：

首先我們會建立一個內含子組件的 HTML 元素，並在 Vue 中定義名為“child”的組件，其中包含了一個 template 將 message 顯示出來，並利用 props 接收父組件傳遞下來的值。

命名方式：

若你的 props 中的元素命名方式為小駝峰式命名（lower camel case），那你必須使用 “-” 來間隔字串間的大小寫

# 子與父

上面我們聊到了應該要建立單一資訊流，但實務上我們還是需要從子組件回傳值到父組件，也許是控制流程；或是將這個值傳遞（props）到別的組件，那我們該如何從子組件回傳值到父組件呢？

以下展示一個簡單的範例：