來自 Svelte o Svelte Understanding Slots（預設和命名）

Svelte 5 中有很多可能令人困惑的變化，這就是為什麼我試圖記錄我從 Svelte 4 到 Svelte 5 的學習過程。
其中之一是在 Svelte 5 中使用插槽。在

預設插槽

Parent.svelte（預設插槽，svelte 4）

Child.svelte（預設插槽，svelte 4）

在 Svelte 5 中，您需要使用 @render 語法來渲染槽，您也可以從新的 $props() 中取得：

Parent.svelte（預設插槽，svelte 5）

Child.svelte（預設插槽，svelte 5）

---

命名插槽

命名槽也發生了變化，使用#snippet和@render語法：

Parent.svelte（命名槽，svelte 4）

Child.svelte（命名槽，svelte 4）

在 Svelte 5 中，您需要使用 #snippet 傳遞槽，然後使用 @render 語法來渲染槽，這也是從新的 $props() 中獲取的：

Parent.svelte（命名插槽，svelte 5）

Child.svelte（命名槽，svelte 5）

---

附加功能：您也可以根據插槽是否透過 if 區塊傳遞來有條件地渲染內容：

Child.svelte（命名槽，svelte 5，條件渲染）

我會繼續記錄遇到的任何更改。順便問一下，您覺得 Svelte 5 怎麼樣？編譯時間的增加、建置大小的減少（對於較大的專案）以及額外的功能是否值得增加複雜性？

駭客快樂！

以上是來自 Svelte o Svelte Understanding Slots（預設和命名）的詳細內容。更多資訊請關注PHP中文網其他相關文章！