Come utilizzare gli slot in Svelte

Svelte offre diversi modi in cui i componenti possono comunicare tra loro, inclusi oggetti di scena, slot, ecc. Dovrai integrare gli slot per creare componenti flessibili e riutilizzabili nelle tue applicazioni Svelte.

Comprendere le slot in Svelte

Slot dentro il quadro Svelte lavorare in modo simile a slot in Vue. Forniscono un modo per passare il contenuto da un componente genitore a un componente figlio. Con gli slot, puoi definire dei segnaposto all'interno del modello di un componente in cui puoi inserire contenuto da un componente principale.

Questo contenuto può essere testo semplice, Markup HTMLo altri componenti Svelte. Lavorare con gli slot ti consente di creare componenti altamente personalizzabili e dinamici che si adattano a diversi casi d'uso.

Creazione di uno slot di base

Per creare uno slot in Svelte, usa il file fessura elemento all'interno del modello di un componente. IL

fessura L'elemento è un segnaposto per il contenuto che passerai dal componente principale. Per impostazione predefinita, lo slot eseguirà il rendering di qualsiasi contenuto ad esso passato.

Ecco un esempio di come creare uno slot di base:

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

Il blocco di codice sopra rappresenta un componente figlio che utilizza l'elemento slot per ottenere contenuto da un componente padre.

Per passare il contenuto da un componente principale a un componente secondario, importerai prima il componente secondario nel componente principale. Quindi, invece di utilizzare un tag a chiusura automatica per eseguire il rendering del componente figlio, utilizza un tag di apertura e chiusura. Infine, all'interno dei tag del componente, scrivi il contenuto che desideri passare dal componente genitore a figlio.

Per esempio:

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

Oltre a trasferire contenuto dai componenti padre-figlio, puoi fornire contenuto di fallback/predefinito negli slot. Questo contenuto è ciò che verrà visualizzato nello slot se il componente principale non trasmette alcun contenuto.

Ecco come puoi trasmettere un contenuto di fallback:

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

Questo blocco di codice fornisce il testo "Contenuto di fallback" come contenuto di fallback da visualizzare nello slot se il componente principale non fornisce alcun contenuto.

Passaggio dei dati attraverso lo slot con i puntelli dello slot

Svelte ti consente di passare i dati agli slot utilizzando gli oggetti di scena degli slot. Utilizzi gli oggetti di scena dello slot in situazioni in cui desideri passare alcuni dati dal componente figlio al contenuto che stai inserendo.

Per esempio:

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

Il blocco di codice sopra rappresenta un componente Svelte. All'interno del sceneggiatura tag, dichiari la variabile Messaggio e assegnare il testo "Hello Parent Component!" ad esso. Passi anche la variabile message allo slot prop Messaggio. Ciò rende i dati del messaggio disponibili al componente principale quando inserisce il contenuto in questo slot.

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

IL lascia: messaggio la sintassi consente al componente principale di accedere al file Messaggio prop dello slot fornito dal componente figlio. IL div tag Messaggio la variabile è i dati da Messaggio supporto per fessura.

Tieni presente che non sei limitato a un singolo oggetto di scena, puoi passare più oggetti di slot come richiesto:

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

Nel componente genitore:

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

Lavorare con gli slot con nome

Puoi utilizzare gli slot denominati quando desideri passare più slot nei tuoi componenti. Gli slot con nome semplificano la gestione dei vari slot, poiché puoi assegnare a ciascuno slot un nome univoco. Con gli slot con nome è possibile creare componenti complessi con layout diversi.

Per creare uno slot con nome, passa a nome prop al fessura elemento:

<div>
 This is the child component

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

In questo esempio sono presenti due slot denominati, lo slot denominato intestazione e lo slot denominato piè di pagina. Usando il fessura prop, puoi passare il contenuto a ciascuno slot dal componente principale.

Per esempio:

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

Questo codice dimostra come utilizzare il file fessura prop per passare il contenuto agli slot denominati. Nel primo arco tag, passi il fessura prop con il valore intestazione. Ciò garantisce che il testo all'interno del file arco il tag verrà visualizzato nel file intestazione fessura. Allo stesso modo, il testo all'interno del file arco etichetta con il fessura il valore dell'oggetto di scena piè di pagina renderà nel piè di pagina fessura.

Comprendere l'inoltro degli slot

L'inoltro slot è una funzionalità di Svelte che ti consente di passare il contenuto da un componente principale attraverso un componente wrapper a un componente figlio. Ciò può essere molto utile nei casi in cui desideri passare contenuto da componenti non correlati.

Ecco un esempio di come utilizzare l'inoltro dello slot, crea prima il componente figlio:

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

Successivamente, crei il componente wrapper:

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

In questo blocco di codice stai passando un altro slot denominato nel file Messaggio slot del componente figlio.

Quindi, nel componente genitore, scrivi questo codice:

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

Nella struttura sopra, il contenuto "Questo proviene dal componente genitore" viene passato attraverso il componente wrapper e direttamente nel componente figlio grazie al wrapperMessage slot all'interno del componente wrapper.

Renditi la vita più semplice con le slot Svelte

Gli slot sono una potente funzionalità di Svelte che ti consente di creare componenti altamente personalizzabili e riutilizzabili. Hai imparato come creare slot di base, slot con nome, utilizzare oggetti di scena, ecc. Comprendendo i diversi tipi di slot e come utilizzarli, puoi creare interfacce utente dinamiche e flessibili.