Snippets par défaut et nommés
Fournissez des snippets de secours et nommez plusieurs emplacements de snippet dans un composant.
Snippets par défaut et nommés est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Fragment par défaut
Le contenu placé entre les balises d’un composant devient le fragment par défaut, accessible via children.
<Card>
<p>Inside the card</p>
</Card>Dans le composant
Effectuez le rendu du contenu par défaut avec la propriété children.
let { children } = $props();
<div class="card">
{@render children()}
</div>Fragments nommés
Transmettez plusieurs fragments par leur nom en tant que propriétés.
<Card>
{#snippet header()}<h2>Title</h2>{/snippet}
{#snippet body()}<p>Text</p>{/snippet}
</Card>Recevoir des fragments nommés
Déclarez chaque fragment nommé comme une propriété.
let { header, body } = $props();
{@render header()}
{@render body()}Contenus de secours
Ajoutez un contenu de secours par défaut avec des conditions normales.
{#if header}{@render header()}{:else}<h2>Default</h2>{/if}Sécurité des types
Indiquez explicitement le type de chaque paramètre de fragment pour bénéficier de la prise en charge par l’environnement de développement.
Remplacer les emplacements nommés
Les fragments remplacent le modèle des emplacements nommés de Svelte 4, avec davantage de possibilités.
Contenu par défaut
Les fragments n’intègrent pas de contenu de secours ; utilisez {#if} à cette fin.
Modèles de composition
Combinez des fragments par défaut et nommés pour créer des composants sans présentation.
Conseil de migration
Lors de la migration, convertissez chaque emplacement nommé en propriété de fragment nommée.
Inférence de TS
Svelte 5 génère automatiquement les types Snippet à partir des propriétés de votre composant.
Vérification rapide
Qu’est-ce qui remplace les emplacements nommés dans Svelte 5 ?
Récapitulatif
Le contenu par défaut utilise le fragment children ; les fragments nommés sont des propriétés explicites rendues avec @render.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Snippets par défaut et nommés » est-elle gratuite ?
Oui — le texte complet de « Snippets par défaut et nommés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Snippets par défaut et nommés » ?
Fournissez des snippets de secours et nommez plusieurs emplacements de snippet dans un composant. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Snippets par défaut et nommés » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- $props() pour des propriétés typées
- {#snippet} et {@render}
- Transmettre des snippets comme propriétés
- Snippets par défaut et nommés