如何在 Svelte 中使用插槽

Svelte 為元件之間的通訊提供了不同的方式，包括 props、slots 等。您將需要整合 slot 來在 Svelte 應用程式中建立靈活且可重複使用的元件。

了解 Svelte 中的插槽

在 Svelte 框架的上下文中，槽的功能類似於 Vue 生態系統中的對應項，透過子元件佈局中指定的佔位符空間將資料從父元素傳輸到子元件。

使用 Svelte 中的插槽可以高度靈活地建立元件，這些元件可以透過使用純文字、HTML 標記或其他 Svelte 元件來針對各種場景進行自訂。老虎機的結合促進了多功能和適應性強的元素的開發，以滿足不同的需求。

建立一個基本插槽

若要在 Svelte 元件的佈局中合併插槽，請利用放置在所述元件模板內的構造。此佔位符旨在接受並顯示源自其對應父實體的資料。同時，預設情況下，該插槽應呈現恰好插入其中的任何物質。

透過在函數簽章中定義每個必要的參數，可以將槽合併到使用者定義的函數中，如下所示:

 <main>
  This is the child component
  <slot></slot>
</main>

提供的程式碼片段展示了子元件的實例，該子元件利用稱為「槽」的指定區域來從其關聯的父元件接收內容。

在網路開發中，為了將資料從父元素傳輸到子元素，首先必須透過import的方式將子元素引入父元素中。隨後，不要使用自結束標記來呈現子元素，而是同時使用開啟和關閉標記。最終，在包含標籤的範圍內，闡明要在父元素和子元素之間傳達的訊息。

例如:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component>
 <span>This is a message from the parent component</span>
 </Component>
</main>

如果父元件無法為其子元件的插槽提供內容，則可以在這些插槽中提供預設或後備內容。當原始母公司未提供任何內容時，這將作為展示的材料。

為了在發生錯誤時提供替代內容，可以使用 SVG 標記中的「fallback」屬性，如下所示:

 <main>
  This is the child component
  <slot>Fallback Content</slot>
</main>

提供的程式碼片段用作備份選項，當父元素未提供替代材料時，在指定槽中顯示短語「後備內容」。

使用 Slot Props 在 Slot 之間傳遞數據

Svelte 能夠透過利用「插槽道具」來傳輸訊息，以便在指定區域（通常稱為「插槽」）內提供特定細節，該區域位於另一個組件內。當在後者的實作過程中需要將細節從一個元件傳送到另一個元件時，就會發生此過程。

例如:

 <script>
  let message = 'Hello Parent Component!'
</script>

<main>
  This is the child component
  <slot message={message}></slot>
</main>

提供的程式碼片段構成了 Svelte 元件。包含在標籤內的命名變數「message」被宣告並指派了值「Hello Parent Component!」。此外，變數“message”作為參數傳遞給同名的“slot”屬性。因此，這使得父元件能夠透過提供上下文相關資訊來取代硬編碼字串「Hello Parent Component！」來向該指定的「訊息」槽提供內容。

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component let:message>
 <div>
 The child component says {message}
 </div>
 </Component>
</main>

使用語法使得父元件能夠存取子元件提供的`message`槽屬性，其中元素中包含的內容直接從前述槽中導出。

值得注意的是，在某些情況下，使用單一插槽道具可能是不夠的。在這種情況下，可能需要利用多個槽道具來適應附加資訊或要求。

 <script>
  let user = {
    firstName: 'John',
    lastName: 'Doe'
  };
</script>

<main>
  This is the child component
  <slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>

在父組件中:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component let:firstName let:lastName>
 <div>
 The user's name is {firstName} {lastName}
 </div>
 </Component>
</main>

使用命名槽

當在組件中使用命名槽時，它們提供了傳遞多個槽的有效方法，同時賦予它們不同的名稱。這種方法有利於更有效地管理大量插槽，並允許創建具有不同配置的複雜元件。

必須為要隨意分配的給定容器內的內容提供所需位置的標籤或標題。

 <div>
  This is the child component
  
  <p>Header: <slot name='header'></slot></p>
  <p>Footer: <slot name='footer'></slot></p>
</div>

考慮這樣的情況:我們有兩個可識別的容器，即「頁首」名稱和「頁尾」名稱。透過使用通用的「時隙」屬性，人們可以將資料從分層結構內的較高層級的組成元素傳輸到這些隔間中的任一個。

例如:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component>
 <span slot="header">This will be passed to the header slot</span>
 <span slot="footer">This will be passed to the footer slot</span>
 </Component>
</main>

提供的代碼說明了利用“slot”和“prop”屬性將內容傳送到指定槽的過程。在初始「 」元素中，透過將「slot」屬性賦予「header」值來定位「header」槽。因此，所包含的文字將顯示在指定的「標題」槽中。對第二個「 」元素重複此方法，透過將「slot」屬性值指派給「footer」來存取「footer」槽，從而呈現指定「footer」槽中包含的文字。

了解時隙轉發

槽轉發是 Svelte 框架的一個方面，它允許透過中間或包裝元件將資料從父元素傳輸到子元素。此功能有助於在斷開連接的元素之間傳遞訊息，並提供管理複雜使用者介面的靈活性。

考慮在動態生態系統中實現槽轉發的過程，其中必要的步驟涉及創建子組件，如下所示:

 <main>
  This is the child component
  <slot name="message"></slot>
</main>

接下來，建立包裝器組件:

 <script>
    import Component from "./Component.svelte";
</script>

<main>
    <Component>
        <div slot='message'>
            <slot name="wrapperMessage"></slot>
        </div>
    </Component>
</main>

在此程式碼片段中，預先定義的變數標籤被引入到從屬介面結構的傳送資料包中。

在父元件中，可以合併上述程式碼片段，以實現基於 props 提供的資料渲染具有可擴展內容的手風琴組件的所需功能。這允許與手風琴組件進行動態和互動的用戶交互，從而增強整體用戶體驗。

 <script>
 import Wrapper from "./Wrapper.svelte";
</script>

<main>
 This is the parent component
 <Wrapper>
 <div slot="wrapperMessage">
 This is from the parent component
 </div>
 </Wrapper>
</main>

上述架構有利於訊息「這是來自父元件」的傳輸，該訊息利用位於包裝器元素內的wrapperMessage槽，在被子元件接收的途中遍歷包裝器元件。

Svelte Slots 讓您的生活更輕鬆

老虎機是 Svelte 中的一個特殊屬性，可以創建高度個人化和可互換的元素。在本課程中，我們向您介紹了建立基本槽、識別槽、利用槽屬性等。透過理解各種插槽及其實現，人們可以建立自適應且多功能的使用者介面設計。