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

logo

 

相信對於沒有用過 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)到別的組件,那我們該如何從子組件回傳值到父組件呢?

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

 

 

Panigale

喜歡 Modern Web的打造方式及簡潔優美的程式碼,也持續在學習有關於 PHP、Javascript的基本觀念及使用技術。

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *