Comment utiliser les machines à sous dans Svelte

Svelte propose différentes manières pour les composants de communiquer entre eux, notamment les accessoires, les emplacements, etc. Vous devrez intégrer des slots pour créer des composants flexibles et réutilisables dans vos applications Svelte.

Comprendre les machines à sous dans Svelte

Fentes dans le cadre Svelte travailler de la même manière que emplacements dans Vue. Ils fournissent un moyen de transmettre du contenu d'un composant parent à un composant enfant. Avec les emplacements, vous pouvez définir des espaces réservés dans le modèle d'un composant où vous pouvez injecter du contenu à partir d'un composant parent.

Ce contenu peut être du texte brut, Balisage HTML, ou d'autres composants Svelte. Travailler avec des emplacements vous permet de créer des composants hautement personnalisables et dynamiques qui s'adaptent à différents cas d'utilisation.

Création d'un emplacement de base

Pour créer un emplacement dans Svelte, utilisez le fente élément dans le modèle d’un composant. Le fente element est un espace réservé pour le contenu que vous transmettrez depuis le composant parent. Par défaut, le slot restituera tout le contenu qui lui est transmis.

Voici un exemple de création d'un emplacement de base :

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

Le bloc de code ci-dessus représente un composant enfant qui utilise l'élément slot pour obtenir le contenu d'un composant parent.

Pour transmettre du contenu d'un composant parent à un composant enfant, vous devez d'abord importer le composant enfant dans le composant parent. Ensuite, au lieu d'utiliser une balise à fermeture automatique pour afficher le composant enfant, utilisez une balise d'ouverture et de fermeture. Enfin, dans les balises du composant, écrivez le contenu que vous souhaitez transmettre du composant parent à enfant.

Par exemple:

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

En plus de transmettre le contenu des composants parent-enfant, vous pouvez fournir du contenu de secours/par défaut dans les emplacements. Ce contenu est ce que le slot affichera si le composant parent ne transmet aucun contenu.

Voici comment transmettre un contenu de secours :

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

Ce bloc de code fournit le texte « Contenu de secours » comme contenu de secours à afficher par l'emplacement si le composant parent ne fournit aucun contenu.

Transmission de données à travers l'emplacement avec les accessoires d'emplacement

Svelte vous permet de transmettre des données aux emplacements à l'aide des accessoires d'emplacement. Vous utilisez les accessoires slot dans les situations où vous souhaitez transmettre certaines données du composant enfant au contenu que vous insérez.

Par exemple:

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

Le bloc de code ci-dessus représente un composant Svelte. Au sein du scénario tag, vous déclarez la variable message et attribuez le texte "Bonjour composant parent!" à cela. Vous transmettez également la variable de message à l'accessoire slot message. Cela rend les données du message disponibles au composant parent lorsqu'il injecte du contenu dans cet emplacement.

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

Le laisser: message La syntaxe permet au composant parent d'accéder au message accessoire de slot fourni par le composant enfant. Le div Mots clés message la variable est les données du message accessoire de fente.

Notez que vous n'êtes pas limité à un seul accessoire de slot, vous pouvez transmettre plusieurs accessoires de slot si nécessaire :

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

Dans le composant parent :

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

Travailler avec des emplacements nommés

Vous pouvez utiliser des emplacements nommés lorsque vous souhaitez transmettre plusieurs emplacements dans vos composants. Les emplacements nommés facilitent la gestion des différents emplacements, car vous pouvez donner à chaque emplacement un nom unique. Avec les emplacements nommés, vous pouvez créer des composants complexes avec différentes dispositions.

Pour créer un emplacement nommé, transmettez un nom soutenir le fente élément:

<div>
 This is the child component

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

Dans cet exemple, il y a deux emplacements nommés, l'emplacement nommé entête et l'emplacement nommé bas de page. En utilisant le fente prop, vous pouvez transmettre du contenu à chaque emplacement à partir du composant parent.

Par exemple:

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

Ce code montre comment utiliser le fente prop pour transmettre le contenu aux emplacements nommés. En premier portée tag, vous passez le fente accessoire avec la valeur entête. Cela garantit que le texte dans le portée la balise sera rendue dans le entête fente. De même, le texte dans le portée étiquette avec le fente valeur de l'accessoire bas de page sera rendu dans le bas de page fente.

Comprendre le transfert de slot

Le transfert d'emplacement est une fonctionnalité de Svelte qui vous permet de transmettre le contenu d'un composant parent via un composant wrapper vers un composant enfant. Cela peut être très utile dans les cas où vous souhaitez transmettre du contenu provenant de composants non liés.

Voici un exemple d'utilisation du transfert d'emplacement, créez d'abord le composant enfant :

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

Ensuite, vous créez le composant wrapper :

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

Dans ce bloc de code, vous transmettez un autre emplacement nommé dans le message emplacement du composant enfant.

Ensuite, dans le composant parent, écrivez ce 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>

Dans la structure ci-dessus, le contenu "Ceci provient du composant parent" est transmis via le composant wrapper et directement dans le composant enfant grâce au wrapperMessage fente à l’intérieur du composant wrapper.

Facilitez-vous la vie avec les machines à sous Svelte

Les emplacements sont une fonctionnalité puissante de Svelte qui vous permet de créer des composants hautement personnalisables et réutilisables. Vous avez appris à créer des emplacements de base, des emplacements nommés, à utiliser des accessoires d'emplacement, etc. En comprenant les différents types d'emplacements et comment les utiliser, vous pouvez créer des interfaces utilisateur dynamiques et flexibles.