Hoe slots in Svelte te gebruiken

Svelte biedt verschillende manieren waarop componenten met elkaar kunnen communiceren, inclusief rekwisieten, slots, enz. U moet slots integreren om flexibele en herbruikbare componenten in uw Svelte-toepassingen te creëren.

Slots in Svelte begrijpen

Sloten erin het Svelte-framework werk vergelijkbaar met slots in Vue. Ze bieden een manier om inhoud door te geven van een bovenliggende component aan een onderliggende component. Met slots kunt u tijdelijke aanduidingen definiëren binnen de sjabloon van een component, waar u inhoud van een bovenliggende component kunt injecteren.

Deze inhoud kan platte tekst zijn, HTML-opmaakof andere Svelte-componenten. Door met slots te werken, kunt u zeer aanpasbare en dynamische componenten creëren die zich aanpassen aan verschillende gebruiksscenario's.

Een basisslot creëren

Om een ​​slot in Svelte te maken, gebruik je de

sleuf element binnen de sjabloon van een component. De sleuf element is een tijdelijke aanduiding voor de inhoud die u vanuit de bovenliggende component doorgeeft. Standaard geeft de slot alle inhoud weer die eraan wordt doorgegeven.

Hier is een voorbeeld van hoe u een basisslot kunt maken:

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

Het bovenstaande codeblok vertegenwoordigt een onderliggende component die het slotelement gebruikt om inhoud van een bovenliggende component op te halen.

Om inhoud van een bovenliggende component door te geven aan een onderliggende component, importeert u eerst de onderliggende component in de bovenliggende component. Gebruik vervolgens een openings- en sluitingstag in plaats van een zelfsluitende tag te gebruiken om de onderliggende component weer te geven. Schrijf ten slotte binnen de tags van de component de inhoud die u wilt doorgeven van de ouder-naar-kind-component.

Bijvoorbeeld:

<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>

Naast het doorgeven van inhoud van de ouder-naar-kind-componenten, kunt u reserve-/standaardinhoud in de slots opgeven. Deze inhoud is wat de slot zal weergeven als de bovenliggende component geen inhoud doorgeeft.

Zo kunt u een fallback-inhoud doorgeven:

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

Dit codeblok biedt de tekst 'Fallback Content' als fallback-inhoud die het slot kan weergeven als de bovenliggende component geen inhoud biedt.

Gegevens doorgeven via slot met slotsteunen

Met Svelte kunt u gegevens doorgeven aan slots met behulp van slotprops. U gebruikt de slotprops in situaties waarin u bepaalde gegevens van de onderliggende component wilt doorgeven aan de inhoud waarin u zich bevindt.

Bijvoorbeeld:

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

Het bovenstaande codeblok vertegenwoordigt een Svelte-component. Binnen de script tag, declareer je de variabele bericht en wijs de tekst "Hallo oudercomponent!" toe. ernaar. U geeft de berichtvariabele ook door aan de slotprop bericht. Hierdoor zijn de berichtgegevens beschikbaar voor de bovenliggende component wanneer deze inhoud in dit slot injecteert.

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

De laat: bericht Met de syntaxis heeft de bovenliggende component toegang tot de bericht slot prop die de onderliggende component biedt. De div tag's bericht variabele zijn de gegevens van de bericht slot prop.

Houd er rekening mee dat u niet beperkt bent tot één slotprop. U kunt indien nodig meerdere slotprops doorgeven:

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

In de bovenliggende component:

<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>

Werken met benoemde slots

U kunt benoemde slots gebruiken als u meerdere slots in uw componenten wilt doorgeven. Benoemde slots maken het eenvoudiger om verschillende slots te beheren, omdat u elk slot een unieke naam kunt geven. Met benoemde slots kunt u complexe componenten met verschillende lay-outs bouwen.

Om een ​​benoemd slot te maken, geeft u a door naam prop voor de sleuf element:

<div>
 This is the child component

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

In dit voorbeeld zijn er twee benoemde slots, het slot genaamd koptekst en de naam van het slot voettekst. De... gebruiken sleuf prop, kunt u inhoud doorgeven aan elke slot vanuit de bovenliggende component.

Bijvoorbeeld:

<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>

Deze code laat zien hoe u de sleuf prop om inhoud door te geven aan benoemde slots. In de eerste span tag, je passeert de sleuf prop met de waarde koptekst. Dit zorgt ervoor dat de tekst binnen de span tag wordt weergegeven in de koptekst sleuf. Op dezelfde manier is de tekst in de span labelen met de sleuf de waarde van prop voettekst zal renderen in de voettekst sleuf.

Slotdoorsturen begrijpen

Slot forwarding is een functie in Svelte waarmee u inhoud van een bovenliggende component via een wrappercomponent naar een onderliggende component kunt doorgeven. Dit kan erg handig zijn in gevallen waarin u inhoud van niet-gerelateerde componenten wilt doorgeven.

Hier is een voorbeeld van hoe u slot forwarding gebruikt. Maak eerst de onderliggende component:

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

Vervolgens maakt u de wrappercomponent:

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

In dit codeblok geef je een ander benoemd slot door aan het bericht slot van de onderliggende component.

Schrijf vervolgens in de bovenliggende component deze 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 de bovenstaande structuur wordt de inhoud "Dit is van de bovenliggende component" doorgegeven via de wrappercomponent en rechtstreeks naar de onderliggende component dankzij de wrapperBericht gleuf in de verpakkingscomponent.

Maak uw leven gemakkelijker met slanke slots

Slots zijn een krachtige functie in Svelte waarmee u zeer aanpasbare en herbruikbare componenten kunt maken. Je hebt geleerd hoe je basisslots kunt maken, slots een naam kunt geven, slotrekwisieten kunt gebruiken, enz. Door de verschillende soorten slots te begrijpen en te begrijpen hoe u ze kunt gebruiken, kunt u dynamische en flexibele gebruikersinterfaces bouwen.