[Vue.js] 在 component 裡面置換不同內容: slot

標籤: Vue.js javascript

我們可能會遇到有些時候共用的 component 裡要做一點不同的變化,但如果為了這點而多做一個 component 又會變成要維護另一個很類似的東西而覺得麻煩,這時就可以使用 slot 來幫我們達成這個需求。

像這樣在 componet 裡放一個 slot 的標籤,我們就可以在使用 component 的時候在 slot 的地方插入任意的內容。

 

也可以把 component 塞到 slot 裡。

 

以上為單一插槽(single slot)的情況,如果想要插入不同內容的地方不只一個,就可以使用 Named Slots 來幫助我們區分要插入的位置,如果沒有設定名稱,則會插入到默認的 slot 裡,如果這時沒有默認的 slot,則該內容會被捨棄。