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)到別的組件,那我們該如何從子組件回傳值到父組件呢?
以下展示一個簡單的範例: