Slots erleichtern die Weitergabe von Daten von einer Komponente zur anderen. Erfahren Sie, wie Sie damit beginnen, dynamische Komponenten zu erstellen.

Svelte bietet verschiedene Möglichkeiten für die Kommunikation von Komponenten untereinander, einschließlich Requisiten, Slots usw. Sie müssen Steckplätze integrieren, um flexible und wiederverwendbare Komponenten in Ihren Svelte-Anwendungen zu erstellen.

Slots in Svelte verstehen

Einsteckplätze das Svelte-Framework funktionieren ähnlich wie Slots in Vue. Sie bieten eine Möglichkeit, Inhalte von einer übergeordneten an eine untergeordnete Komponente zu übergeben. Mit Slots können Sie Platzhalter innerhalb der Vorlage einer Komponente definieren, in die Sie Inhalte aus einer übergeordneten Komponente einfügen können.

Dieser Inhalt kann reiner Text sein, HTML-Markupoder andere Svelte-Komponenten. Durch die Arbeit mit Slots können Sie hochgradig anpassbare und dynamische Komponenten erstellen, die sich an verschiedene Anwendungsfälle anpassen.

instagram viewer

Erstellen eines Basis-Slots

Um einen Slot in Svelte zu erstellen, verwenden Sie die Slot Element innerhalb der Vorlage einer Komponente. Der Slot Das Element ist ein Platzhalter für den Inhalt, den Sie von der übergeordneten Komponente übergeben. Standardmäßig rendert der Slot alle an ihn übergebenen Inhalte.

Hier ist ein Beispiel für die Erstellung eines einfachen Slots:

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

Der obige Codeblock stellt eine untergeordnete Komponente dar, die das Slot-Element verwendet, um Inhalte von einer übergeordneten Komponente abzurufen.

Um Inhalte von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben, importieren Sie zunächst die untergeordnete Komponente in die übergeordnete Komponente. Verwenden Sie dann anstelle eines selbstschließenden Tags zum Rendern der untergeordneten Komponente ein öffnendes und schließendes Tag. Schreiben Sie abschließend in die Tags der Komponente den Inhalt, den Sie von der übergeordneten an die untergeordnete Komponente übergeben möchten.

Zum Beispiel:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Component>
<span>This is a message from the parent componentspan>
Component>
main>

Zusätzlich zur Weitergabe von Inhalten aus den übergeordneten an untergeordnete Komponenten können Sie in den Slots Fallback-/Standardinhalte bereitstellen. Dieser Inhalt wird im Slot angezeigt, wenn die übergeordnete Komponente keinen Inhalt übergibt.

So können Sie einen Fallback-Inhalt übergeben:

<main>
 This is the child component
<slot>Fallback Contentslot>
main>

Dieser Codeblock stellt den Text „Fallback Content“ als Fallback-Inhalt für den Slot bereit, der angezeigt wird, wenn die übergeordnete Komponente keinen Inhalt bereitstellt.

Weitergabe von Daten über Slot mit Slot-Requisiten

Mit Svelte können Sie mithilfe von Slot-Requisiten Daten an Slots übergeben. Sie verwenden die Slot-Requisiten in Situationen, in denen Sie einige Daten von der untergeordneten Komponente an den Inhalt übergeben möchten, den Sie einfügen möchten.

Zum Beispiel:

<script>
 let message = 'Hello Parent Component!'
script>
<main>
 This is the child component
<slotmessage={message}>slot>
main>

Der obige Codeblock stellt eine Svelte-Komponente dar. Innerhalb der Skript Tag deklarieren Sie die Variable Nachricht und weisen Sie den Text „Hallo übergeordnete Komponente!“ zu. dazu. Sie übergeben die Nachrichtenvariable auch an die Slot-Requisite Nachricht. Dadurch werden die Nachrichtendaten für die übergeordnete Komponente verfügbar, wenn sie Inhalte in diesen Slot einfügt.

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Componentlet: message>
<div>
 The child component says {message}
div>
Component>
main>

Der let: Nachricht Die Syntax ermöglicht der übergeordneten Komponente den Zugriff auf Nachricht Slot-Requisite, die die untergeordnete Komponente bereitstellt. Der div Stichworte Nachricht Variable sind die Daten aus dem Nachricht Schlitzstütze.

Beachten Sie, dass Sie nicht auf eine einzelne Slot-Requisite beschränkt sind, sondern nach Bedarf mehrere Slot-Requisiten übergeben können:

<script>
 let user = {
 firstName: 'John',
 lastName: 'Doe'
 };
script>
<main>
 This is the child component
<slotfirstName={user.firstName}lastName={user.lastName}>slot>
main>

In der übergeordneten Komponente:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Componentlet: firstNamelet: lastName>
<div>
 The user's name is {firstName} {lastName}
div>
Component>
main>

Arbeiten mit benannten Slots

Sie können benannte Slots verwenden, wenn Sie in Ihren Komponenten mehrere Slots übergeben möchten. Benannte Slots erleichtern die Verwaltung verschiedener Slots, da Sie jedem Slot einen eindeutigen Namen geben können. Mit benannten Steckplätzen können Sie komplexe Komponenten mit unterschiedlichen Layouts erstellen.

Um einen benannten Slot zu erstellen, übergeben Sie a Name Stütze zum Slot Element:

<div>
 This is the child component

<p>Header: <slotname='header'>slot>p>
<p>Footer: <slotname='footer'>slot>p>
div>

In diesem Beispiel gibt es zwei benannte Slots, den Slot benannt Header und der Slot benannt Fusszeile. Verwendung der Slot prop können Sie Inhalte von der übergeordneten Komponente an jeden Slot übergeben.

Zum Beispiel:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Component>
<spanslot="header">This will be passed to the header slotspan>
<spanslot="footer">This will be passed to the footer slotspan>
Component>
main>

Dieser Code zeigt, wie Sie das verwenden Slot Requisite, um Inhalte an benannte Slots zu übergeben. In der ersten Spanne Tag, du übergibst das Slot prop mit dem Wert Header. Dadurch wird sichergestellt, dass der Text innerhalb der Spanne Tag wird im gerendert Header Slot. Ebenso ist der Text innerhalb der Spanne Tag mit dem Slot Wert der Requisite Fusszeile wird in der rendern Fusszeile Slot.

Slot-Weiterleitung verstehen

Slot-Weiterleitung ist eine Funktion in Svelte, die es Ihnen ermöglicht, Inhalte von einer übergeordneten Komponente über eine Wrapper-Komponente an eine untergeordnete Komponente weiterzuleiten. Dies kann in Fällen sehr nützlich sein, in denen Sie Inhalte von nicht verwandten Komponenten übergeben möchten.

Hier ist ein Beispiel für die Verwendung der Slot-Weiterleitung. Erstellen Sie zunächst die untergeordnete Komponente:

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

Als Nächstes erstellen Sie die Wrapper-Komponente:

<script>
 import Component from "./Component.svelte";
script>
<main>
<Component>
<divslot='message'>
<slotname="wrapperMessage">slot>
div>
Component>
main>

In diesem Codeblock übergeben Sie einen weiteren benannten Slot an den Nachricht Steckplatz der untergeordneten Komponente.

Schreiben Sie dann in der übergeordneten Komponente diesen Code:

<script>
 import Wrapper from "./Wrapper.svelte";
script>
<main>
 This is the parent component
<Wrapper>
<divslot="wrapperMessage">
 This is from the parent component
div>
Wrapper>
main>

In der obigen Struktur wird der Inhalt „Dies ist von der übergeordneten Komponente“ durch die Wrapper-Komponente und direkt in die untergeordnete Komponente weitergeleitet WrapperMessage Steckplatz in der Wrapper-Komponente.

Machen Sie Ihr Leben einfacher mit Svelte Slots

Slots sind eine leistungsstarke Funktion in Svelte, mit der Sie hochgradig anpassbare und wiederverwendbare Komponenten erstellen können. Sie haben gelernt, wie Sie einfache Slots und benannte Slots erstellen, Slot-Requisiten verwenden usw. Wenn Sie die verschiedenen Arten von Slots und deren Verwendung verstehen, können Sie dynamische und flexible Benutzeroberflächen erstellen.