文科少女學程式

關於Vue的slot用法，雖然以前有查資料了解用法，但是因為沒有實際使用的經驗，其實當初查了相關資料後，還是有看沒有懂，久了也就先把這塊放掉了。直到上戰場，才發現slot的用法其實很常出現，所以也就代表這個東西一定要搞懂了。最近又剛好在重構專案，需要把Vue2改寫程Vue3，有遇到一些slot的內容，花了一點時間去釐清slot的用法，於是就決定好好地寫一篇slot的學習紀錄。

Slot是什麼？
Slot的中文就是「插槽」，可以在子元件中設定一個插槽，當在父元件中使用這個子元件時，就可以從父元件中把想放入的內容放入這個已經在子元件中產生的插槽。這不禁讓有點宅的我想到一個比喻，這其實就跟武器鑲嵌是同樣的概念，在武器上開一個插槽，角色要使用這個武器時，可以自己決定要不要把寶石鑲嵌上去，是說這種武器上的鑲嵌插槽在韓文中真的也叫做slot(슬롯)XD。
 

為什麼需要使用Slot？
這時候大家一定覺得很疑惑，為什麼非得使用slot？因為當我們把一些會重複使用的部分拆成一個子元件來重複使用時，若裡面渲染的內容會依照父元件的狀況顯示不同的內容，就會需要將子元件打開插槽。就像是RPG遊戲中的主角(父元件)，想要重頭到尾都使用同一個長得特別酷炫的武器，但又想要讓這個武器(子元件)有暴擊加成功能時，這時當然就得讓武器開一個插槽，使用武器的鑲嵌效果了。(當然也是可以換一個有暴擊的武器，只是就是想要用這個長的特別帥氣的武器，就只能用插槽啦！)

(上圖擷取自一款我參與過文本翻譯的遊戲官方社群網站XD)

Slot的用法
接下來讓我們來看一下在子元件上要怎麼使用插槽功能！
1. Default Slot 單個插槽
如果子元件只有一個插槽，就不會針對插槽取名字，當沒有針對插槽命名時，插槽的名字會被預設為default。
使用方式
(1)首先在需要設定slot的子元件上標示出可能會利用slot放入內容的地方。
情境：建立一個button子元件，裡面設定一個插槽。

(2)接下來在父元件上使用這個有slot的子元件，並把想要另外透過父元件放置的內容放入。
情境：在父元件上使用Button元件時，額外放入要渲染的字串，按鈕元件就會依照父元件中擺放的內容顯示，這裡放入「取消」兩個字，所以按鈕變成取消鈕。



父元件若沒有在Slot處放置內容的話，預設顯示的內容會是子元件上設定的內容


2. Named Slot 具名插槽
當子元件上需要使用的slot的地方不只有一個的話，就會需要使用具名插槽，這樣才可以辨認特定名字的slot要放入哪個內容。
使用方式
(1)首先一樣在需要使用插槽的子元件上設定插槽，但這裡與基本用法不一樣的地方還需要加上插槽的名字name。
情境：在子元件上設定了一個標題和敘述，於父元件使用時可以依照狀況放入不同的標題及敘述。

(2)在父元件上使用時，則是使用template標籤，並在template標籤上用v-slot加上對應名字，想要放入的內容則是放在template標籤裡面。
情境：在父元件上名為title的slot放入「父元件設定的標題」，名為description的slot放入「父元件設定的敘述」。

實際呈現的畫面


3. Scoped Slot 作用域插槽
當某些資料在子元件裡面，但是在父元件中使用該子元件時，又需要利用子元件上的那些資料來渲染畫面時，就可以透過作用域插槽把被用v-bind綁定到子元件上的資料，傳到父元件中被使用。
使用方式
注意！Vue3已經刪除用slot-scope來接收子元件的用法，所以以下的使用情境統一使用v-slot。
(1)一樣先在需要使用插槽的子元件上設定插槽，並且用v-bind把要使用的資料綁在slot上。

(2)在父原件上使用時，使用template標籤，並且透過v-slot="資料名"從父元件接回子元件上的子元件資料(傳到父元件的資料會是物件形式)。接回父元件的props資料在父元件被命名為props，但在子元件名字為bind-string，換句話說父元件接回來的資料會是內含有bindString屬性物件，且這個物件名為props，也就是props = { "bindString": "子元件傳入的字串" })。
注意！這裡名字為props是因為透過v-slot接資料時，寫成v-slot="props"，可以改成其他名字。

在父元件上要使用子元件傳來的bindString時，還可以用解構的方式取得，也就是不需要另外再取一個名字(例如上述的props)。

v-slot的簡寫用法
在使用v-slot時，除了寫出｢v-slot｣外，還可以簡寫成#default，若用具名插槽的用法，把要使用的名字加上，例如「v-slot="name"」，簡寫則寫成「#name」。

實際範例
最後來看一下幾個實際使用上的範例吧！
範例一、在父元件上使用card子元件，並運用Named Slot放入從父元件使用v-for帶進去的資料。
(以前還不懂slot時，都是從父元件把一整個需要渲染的資料用props傳入子元件，如果是透過slot，就不需要進行這個動作，資料一律都只會存在於父元件上，子元件的內容也就變得更單純了。)
父元件


子元件

實際呈現的畫面

如果在父元件上沒有利用v-slot把要放入的資料放進去的話，就會顯示預設的內容。


範例二、Element UI的Table中活用Scoped Slot
在使用Element UI的表格元件時，可以透過Scoped Slot去接回子元件的資料。
以下是官方文件中提供的組件範例，把總表格的資料都放到表格元件上時，就可以透過這個方式將在子層的資料取出渲染。

其他更詳細的用法可以參考官方文件

以上就是前陣子研究slot後，整理出來的內容。
如果有不太正確的地方，歡迎跟我說。
這次的學習筆記就先到這裡囉，大家掰餔！