Noms de slots dynamiques
v-slot:[dynamicName], sélection programmatique des slots, affichage conditionnel des slots.
Noms de slots dynamiques est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Pourquoi utiliser des noms d’emplacement dynamiques
Parfois, l’emplacement que vous voulez remplir n’est connu qu’au moment de l’exécution : il dépend d’une prop, d’un état ou d’une variable de boucle. Vue vous permet de calculer un nom d’emplacement avec la syntaxe entre crochets.
La syntaxe des arguments dynamiques
Entourez une expression de crochets après v-slot:. Vue l’évalue pour déterminer le nom de l’emplacement cible.
<MyComponent>
<template v-slot:[dynamicName]>
Goes into whatever slot dynamicName equals
</template>
</MyComponent>Forme abrégée avec des crochets
La forme abrégée # accepte également les arguments dynamiques.
<MyComponent>
<template #[dynamicName]>
Dynamic slot content
</template>
</MyComponent>Déterminer le nom à partir de l’état
L’expression entre crochets peut lire n’importe quelle valeur réactive. La modification de la variable change l’emplacement dans lequel le contenu est inséré.
const dynamicName = ref("header");
// later: dynamicName.value = "footer";Changer le contenu généré
Associés à un enfant qui définit plusieurs emplacements nommés, les noms dynamiques permettent d’activer différentes zones d’un modèle selon l’état.
<!-- child has slots: header, body, footer -->
<Panel>
<template #[activeSection]>
Active content here
</template>
</Panel>Choisir les noms à partir des props
Une prop du composant peut déterminer l’emplacement. C’est pratique pour les conteneurs configurables dans lesquels l’appelant choisit la zone utilisée.
const props = defineProps({ target: String });
// use props.target inside #[props.target]Itérer sur des emplacements dynamiques
Vous pouvez générer des emplacements dans une boucle en calculant chaque nom à partir de l’élément de la boucle, ce qui est utile pour les colonnes d’un tableau ou les systèmes d’onglets.
<template
v-for="col in columns"
v-slot:[col.name]="{ row }"
>
{{ row[col.field] }}
</template>Noms valides en minuscules
Les noms d’emplacement dynamiques doivent produire des chaînes valides. Null est traité comme l’emplacement par défaut. Évitez les espaces et les caractères non valides dans les noms d’attributs HTML lorsque vous utilisez des modèles en ligne.
const name = condition ? "primary" : null;
// null -> default slotSélection conditionnelle d’un emplacement
Une expression ternaire entre les crochets sélectionne un emplacement parmi plusieurs selon une condition, directement dans le modèle.
<Alert>
<template #[isError ? 'error' : 'info']>
{{ message }}
</template>
</Alert>Cas d’utilisation avec un composant d’onglets
Un composant Tabs peut générer le contenu de l’onglet actif en calculant le nom de l’emplacement à partir de l’identifiant de l’onglet sélectionné, tout en conservant un parent déclaratif.
<Tabs>
<template #[currentTab]>
{{ tabContent }}
</template>
</Tabs>Privilégier la lisibilité
Les emplacements dynamiques sont puissants, mais peuvent rendre l’intention moins évidente. Préférez-les lorsque l’ensemble des emplacements dépend réellement des données ; pour quelques emplacements fixes, de simples emplacements nommés sont plus lisibles.
Vérification rapide
Quelle syntaxe sélectionne un emplacement dont le nom est calculé au moment de l’exécution ?
Récapitulatif
Vous avez appris que les noms de slots dynamiques utilisent la syntaxe entre crochets v-slot:[expr] ou #[expr] pour calculer, à partir des props ou de l’état, quel slot remplir, ce qui permet de créer des enveloppes configurables, des systèmes d’onglets et un affichage de colonnes piloté par les données.
Questions Fréquemment Posées
La leçon « Noms de slots dynamiques » est-elle gratuite ?
Oui — le texte complet de « Noms de slots dynamiques » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Noms de slots dynamiques » ?
v-slot:[dynamicName], sélection programmatique des slots, affichage conditionnel des slots. Tu pratiques Vue 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 Vue Academy ?
Aucune expérience préalable n'est requise. Vue 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 3 sur 4.
Combien de temps prend la leçon « Noms de slots dynamiques » ?
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 Vue Academy ?
Oui. Chaque leçon Vue 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
- Slots nommés et slot par défaut
- Slots délimités : transmettre des données au parent
- Noms de slots dynamiques
- Contenu de secours des slots et vérification des slots