Emplacements et emplacements avec portée
Composez des composants flexibles à l’aide d’emplacements et d’emplacements avec portée
Emplacements et emplacements avec portée est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. 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 3 leçons au total.
Que sont les slots ?
Les slots permettent à un parent d’injecter du contenu dans le modèle d’un composant enfant.
- Les props transmettent des données ; les slots transmettent du balisage
- Ils sont très utiles pour les conteneurs de mise en page, les cartes et les fenêtres modales
- L’enfant décide de l’emplacement du contenu
Le slot par défaut
Un enfant définit un espace réservé avec l’élément slot. Tout ce que le parent place entre les balises le remplit.
<!-- Card.vue (child) -->
<template>
<div class="card">
<slot></slot>
</div>
</template>Utiliser le slot par défaut
Le parent transmet le contenu entre les balises du composant.
<!-- Parent -->
<Card>
<h2>Title</h2>
<p>Any content goes here.</p>
</Card>
<!-- It renders inside the card div -->Contenu de secours d’un slot
Un slot peut fournir un contenu de secours, affiché lorsque le parent ne transmet rien.
<!-- Button.vue -->
<template>
<button>
<slot>Click me</slot>
</button>
</template>
<!-- <Button /> shows "Click me";
<Button>Save</Button> shows "Save" -->Plusieurs slots nommés
Les slots nommés permettent à un composant d’exposer plusieurs points d’insertion.
<!-- Layout.vue -->
<template>
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</template>Remplir des slots nommés
Le parent cible un slot nommé avec v-slot:name sur une balise de modèle.
<Layout>
<template v-slot:header>
<h1>Site Title</h1>
</template>
<p>Main content (default slot)</p>
<template v-slot:footer>
<small>Copyright 2024</small>
</template>
</Layout>Forme abrégée de v-slot
v-slot possède une forme abrégée : le symbole #.
<Layout>
<template #header>
<h1>Title</h1>
</template>
<template #footer>
<small>Footer</small>
</template>
</Layout>Slots avec portée
Les slots avec portée permettent à l’enfant de transmettre des données au contenu du slot.
- L’enfant lie les données sur l’élément slot
- Le parent les reçoit sous forme de props du slot
- Utile lorsque l’enfant contrôle les données, mais que le parent contrôle l’apparence
Exposer des données depuis un enfant
L’enfant lie des attributs au slot pour partager des données.
<!-- UserList.vue -->
<template>
<li v-for="user in users" :key="user.id">
<slot :user="user"></slot>
</li>
</template>Utiliser les données d’un slot avec portée
Le parent reçoit les données via v-slot.
<UserList>
<template #default="slotProps">
{{ slotProps.user.name }}
</template>
</UserList>
<!-- or destructure: #default="{ user }" -->Quand utiliser chaque slot
Guide rapide :
- Slot par défaut pour une simple injection de contenu
- Slots nommés pour plusieurs zones (mise en page)
- Slots avec portée lorsque le parent a besoin des données internes de l’enfant
Vérification rapide
Vérifiez votre compréhension des slots.
Récapitulatif : slots
Vous avez appris à distribuer du contenu avec les slots :
- Le slot par défaut injecte le balisage fourni par le parent
- Le contenu de secours s’affiche lorsqu’aucun contenu n’est transmis
- Les slots nommés (v-slot:name, forme abrégée #) ciblent des zones
- Les slots avec portée transmettent les données de l’enfant au contenu du slot
Ensuite : principes fondamentaux de la réactivité.
Questions Fréquemment Posées
La leçon « Emplacements et emplacements avec portée » est-elle gratuite ?
Oui — le texte complet de « Emplacements et emplacements avec portée » 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 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Emplacements et emplacements avec portée » ?
Composez des composants flexibles à l’aide d’emplacements et d’emplacements avec portée 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 3.
Combien de temps prend la leçon « Emplacements et emplacements avec portée » ?
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
- Créer et enregistrer des composants
- Props et événements personnalisés
- Emplacements et emplacements avec portée