Machines à sous Svelte

Comment travailler avec des slots dans Svelte pour définir des composants qui peuvent être composés ensemble

Les slots sont un moyen pratique de définir des composants qui peuvent être composés ensemble.

Et vice versa, selon votre point de vue, les slots sont un moyen pratique de configurer un composant que vous importez.

Voici comment ils fonctionnent.

Dans un composant, vous pouvez définir un emplacement à l'aide du<slot />(ou<slot></slot>) syntaxe.

Voici unButton.sveltecomposant qui imprime simplement un<button>Balise HTML:

<button><slot /></button>

Pour les développeurs React, c'est fondamentalement la même chose que<button>{props.children}</button>

Tout composant qui l'importe peut définir le contenu qui va être placé dans l'emplacement en l'ajoutant aux balises d'ouverture et de fermeture du composant:

<script>
import Button from './Button.svelte'
</script>
<Button>Insert this into the slot</Button>

Vous pouvez définir une valeur par défaut, qui est utilisée si l'emplacement n'est pas rempli:

<button>
  <slot>
    Default text for the button
  </slot>
</button>

Vous pouvez avoir plusieurs emplacements dans un composant et vous pouvez les distinguer l'un de l'autre à l'aide d'emplacements nommés. L'emplacement unique sans nom sera celui par défaut:

<slot name="before" />
<button>
  <slot />
</button>
<slot name="after" />

Voici comment vous l'utiliseriez:

<script>
import Button from './Button.svelte'
</script>
<Button>
Insert this into the slot
<p slot=“before”>Add this before</p>
<p slot=“after”>Add this after</p>
</Button>

Et cela rendrait ce qui suit au DOM:

<p slot="before">Add this before</p>
<button>
  Insert this into the slot
</button>
<p slot="after">Add this after</p>

Téléchargez mon gratuitManuel de Svelte

Machines à sous Svelte

Comment travailler avec des slots dans Svelte pour définir des composants qui peuvent être composés ensemble

Plus de tutoriels sveltes: