Props 基礎介紹

Chun
3 min readOct 6, 2020

Props

Props 為由外到內的資料傳遞,分為「靜態傳遞」和「動態傳遞」。

  1. 靜態傳遞:直接在屬性上給值(圖片網址)。
inside-img-url=”圖片網址”

2. 動態傳遞:在屬性名稱 inside-img-url 的前面加上冒號「:」,並代入外層屬性的名稱 outsideUrl。

:inside-img-url=”outsideUrl”

單向數據流(One-Way Data Flow)

Props 是由外層元件傳遞至內層元件,也稱為「單向數據流」,也就是當外層資料變動時,經由 Props 接收的資料也會隨之更動。反之,使用 Props 接收的資料變更,是無法傳遞至外層元件的,這樣的反向的作法也會跳錯。

解決方法:新增變數,用來接收 props 所接收到的資料。並將變數替換原先雙向綁定 v-model 的變數。

尚未宣告的變數

當使用 ajax 讀取資料時,會產生時間差,DOM 元素已加載完成,但是 ajax 遠端的資料尚未傳入的時候,就會導致出錯,無法取得變數資料。

解決方法:使用 v-if 讓元件的產生時間往後移,當元件的資料載入完畢後,才渲染元件。

維持狀態與生命週期

使用 <keep-alive> 元素將其動態元件<keep-card>包裹起來,可以讓元件<keep-card>能夠被暫存下來。僅會暫時影藏元件inactive(見下方 Vue 開發者工具截圖),但不會重新渲染元件。

Props 的型別

預先定義好 Props 的型別,有助於減少資料出錯,開發時也比較容易除錯。

Props 的預設值

若是元件不須使用 props 傳遞資料,但需要帶有預設值時,可補上 default。

靜態與動態傳入數值差異

當使用靜態傳遞時,傳遞的資料都是字串。

<prop-type cash=”300"></prop-type>  // 靜態傳遞,300 為字串

改為動態傳遞,即可改為數值的型別。

<prop-type :cash=”300"></prop-type>  // 動態傳遞,300 為數值

--

--