defineExpose et useAttrs
Exposition des éléments internes d’un composant avec defineExpose(), useAttrs() pour les attributs transmis.
defineExpose et useAttrs 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.
Exposer et transmettre
Deux outils supplémentaires complètent la communication entre composants : defineExpose permet à un parent d'accéder à un enfant, et useAttrs fournit les attributs restants transmis par le parent. Les deux sont courants dans les composants réutilisables.
Les composants sont fermés par défaut
Avec <script setup>, rien de ce qui se trouve dans le composant n'est accessible depuis une référence de modèle du parent. Cet encapsulage est utile, mais un parent doit parfois légitimement appeler une méthode enfant.
defineExpose ouvre une porte
defineExpose publie explicitement certaines méthodes ou valeurs à destination du parent. Transmettez un objet contenant les éléments que vous souhaitez partager.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>Appeler les méthodes exposées depuis un parent
Le parent récupère l'enfant avec une référence de modèle et appelle la méthode exposée. Seules les clés transmises à defineExpose sont visibles.
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const childRef = ref()
function doReset() { childRef.value.reset() }
</script>
<template>
<Child ref="childRef" />
</template>Exemple de mise au point
Exposer une méthode focus permet à un parent de placer le focus sur un champ de saisie à l'intérieur d'un composant personnalisé sans compromettre l'encapsulation.
<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>Que sont les attributs transmis ?
Lorsqu'un parent place sur votre composant un attribut qui n'est ni une prop déclarée ni un événement (comme class, id ou data-*), celui-ci devient un attribut transmis.
Lire les attrs avec useAttrs
useAttrs() renvoie un objet contenant tous les attributs transmis. Utilisez-le lorsque vous devez les inspecter ou les déplacer dans le script.
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>Transmission automatique
Par défaut, Vue applique les attrs transmis à l'élément racine unique de votre modèle. Si votre composant possède un seul élément racine div, une class fournie par le parent y est automatiquement placée.
Désactiver la transmission automatique
Lorsque vous souhaitez placer les attrs ailleurs que sur la racine (par exemple sur un input interne dans un conteneur), désactivez la transmission automatique avec inheritAttrs: false dans un bloc script normal.
<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>Transmettre les attrs avec v-bind
Après avoir désactivé la transmission automatique, transmettez les attrs à l'élément de votre choix avec v-bind="attrs". Il s'agit du modèle standard pour les conteneurs de champs de saisie.
<template>
<label>
<span>Name</span>
<input v-bind="attrs" />
</label>
</template>Quand utiliser chaque outil
- defineExpose : permet à un parent d'appeler les méthodes de l'enfant via une référence de modèle.
- useAttrs + inheritAttrs: false + v-bind : permet de contrôler précisément l'emplacement des attributs transmis par le parent.
Vérification rapide
Testez vos connaissances sur l'exposition et les attrs.
Récapitulatif
Points essentiels :
defineExposepublie certaines méthodes ou valeurs à destination de la référence du parent.- Les attrs transmis sont des attributs du parent qui ne sont ni des props ni des événements.
useAttrs()les lit ; la transmission automatique cible l'élément racine.- Utilisez
inheritAttrs: false+v-bind="attrs"pour les rediriger.
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
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « defineExpose et useAttrs » est-elle gratuite ?
Oui — le texte complet de « defineExpose et useAttrs » 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 « defineExpose et useAttrs » ?
Exposition des éléments internes d’un composant avec defineExpose(), useAttrs() pour les attributs transmis. 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 « defineExpose et useAttrs » ?
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
- Introduction à script setup
- defineProps et defineEmits
- defineExpose et useAttrs
- Importer et utiliser des composables dans script setup