Vue – 如何理解「使用 slot 分發內容」

關於 slot (插槽) 的範例說明,在官方網站並不是介紹得很清楚(參考)。標題「使用 slot 分發內容」這句話其實不易理解,但意思就是說「父組件準備好內容,分發給子組件安排的結構」。父組件只負責內容,但不負責擺放的位置;子組件負責擺放位置,但不理會內容是什麼

  • 內容就是長相
    • 例如你要呈現的 <header><main><div>文字…長怎麼樣
    • 像是眼睛會有眼睫毛、眼皮、眼珠子。
    • 當然也可以把眼睛再拆分更細的組件,就看需求了。
  • 結構就是擺哪裡
    • 例如你的 <header> 要把在 <main> 的前面或後面?
    • 像是眼睛要擺在鼻子上方,嘴要放在鼻子下方。

這裡我依序擴增的步驟來教學。

步驟一、建立 Vue 初始位置,並加入組件

步驟二、加入父組件

加入 <c-container> 組件,告知使用 #element 模板

步驟三、在父模版中,用子組件包圍內容

這時候會輸出

目前有 <c-struct> 是因為我們還沒有指派子組件。

步驟四、加入子組件

  • <c-struct> 組件,告知使用 #container 模板
  • 指定 header 對應插槽(slot)的名稱

因為設定了子組件 c-struct,所以目前存檔的畫面會變空白。因為模版 #container 我們還沒有寫內容,template#element > c-struct 會被丟棄。

步驟五、子組件加入 <slot> 擺放位置

會輸出

我們會發現 .container出現了,.container 底下也將 <slot name=”header”> 替換為 <heade>。

步驟六、添加其他 slot 插槽位置與對應內容

會輸出

為什麼會先出現 <main> 再出現 <footer> 呢?因為我們在子組件 (c-struct) 指定的模版 (template#container) ,插槽依序排列為 <slot name=”header”>、<slot name=”main”>、<slot name=”footer”>。所以一旦我們改變 <slot> 的位置,呈現的順序也就跟著不同囉。

如果不指定 <slot> 的 name 會怎麼樣?

若子組件的模版只有 <slot>,那就會把父組件模版中沒有指定 slot 屬性的元素,收集起來替換掉 <slot> 的位置。

會輸出

如果有散落的元素內容,但子組件模版中沒有 <slot> 會如何?

那內容就會被丟棄,不會顯示囉!會輸出

附上完整範例

Comments

發表迴響