0Pricing
Vue Academy · Leçon

defineProps et defineEmits

Props typées avec defineProps (), defineEmits (), withDefaults() pour les valeurs par défaut.

defineProps et defineEmits est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Communiquer entre les composants

Les composants reçoivent des données via les props et envoient des messages vers le parent via les événements. Dans <script setup>, vous les déclarez avec les macros defineProps et defineEmits.

defineProps avec la forme d'exécution

Vous pouvez déclarer les props avec un objet d'exécution, comme dans l'API des options. Cela fonctionne en JS comme en TS.

<script setup>
const props = defineProps({
  title: String,
  count: Number
})
console.log(props.title)
</script>

defineProps avec un type générique TypeScript

Avec TypeScript, transmettez un type via le type générique pour obtenir des props plus claires et vérifiées par le typage. Le compilateur transforme ce type en déclarations d'exécution.

<script setup lang="ts">
const props = defineProps<{
  title: string
  count: number
}>()
</script>

Props facultatives avec ?

Ajoutez un point d'interrogation à une propriété du type pour la rendre facultative. Les props facultatives peuvent valoir undefined si le parent ne les transmet pas.

<script setup lang="ts">
const props = defineProps<{
  title: string
  subtitle?: string
}>()
</script>

Valeurs par défaut avec withDefaults

La forme basée sur un type ne permet pas de définir des valeurs par défaut ; Vue fournit donc withDefaults. Entourez defineProps de cet utilitaire et fournissez un objet de valeurs par défaut.

<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string
  count?: number
}>(), {
  title: 'Untitled',
  count: 0
})
</script>

Utiliser les props dans le modèle

Les props sont réactives. Référencez-les directement dans le modèle ou via props.x dans le script.

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

Les props sont en lecture seule

Ne modifiez jamais une prop dans le composant enfant. Les props circulent dans un seul sens : du parent vers l'enfant. Si vous avez besoin d'une copie locale modifiable, dérivez-la avec computed ou un ref local.

Déclarer des événements avec defineEmits

defineEmits déclare les événements qu'un composant peut déclencher. La forme d'exécution reçoit un tableau de noms d'événements.

<script setup>
const emit = defineEmits(['submit', 'cancel'])
function onSave() { emit('submit') }
</script>

Événements typés avec TypeScript

La forme basée sur un type vous permet de spécifier les noms d'événements et les types de leurs charges utiles. Cela détecte les erreurs comme l'émission d'un argument du mauvais type.

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'submit', payload: string): void
  (e: 'cancel'): void
}>()
</script>

Émettre une charge utile

Appelez emit avec le nom de l'événement et les données de votre choix. Le parent écoute avec @submit et reçoit la charge utile.

<script setup lang="ts">
const emit = defineEmits<{ (e: 'submit', value: string): void }>()
function send() { emit('submit', 'hello') }
</script>

Assembler le tout

Un enfant reçoit une prop title et émet un événement submit. Le parent réagit aux deux : des données unidirectionnelles propres et typées, complétées par des événements explicites.

<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ (e: 'submit', v: string): void }>()
</script>

Vérification rapide

Vérifiez votre compréhension des props et des événements émis.

Récapitulatif

Vous avez appris les entrées et sorties des composants dans <script setup> :

  • defineProps déclare les entrées (objet d'exécution ou type générique TS).
  • Utilisez ? pour les props facultatives et withDefaults pour les valeurs par défaut.
  • Les props sont en lecture seule et circulent dans un seul sens.
  • defineEmits déclare les événements, avec des noms et des charges utiles éventuellement typés.

Questions Fréquemment Posées

La leçon « defineProps et defineEmits » est-elle gratuite ?

Oui — le texte complet de « defineProps et defineEmits » 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 « defineProps et defineEmits » ?

Props typées avec defineProps (), defineEmits (), withDefaults() pour les valeurs par défaut. 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 2 sur 4.

Combien de temps prend la leçon « defineProps et defineEmits » ?

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

  1. Introduction à script setup
  2. defineProps et defineEmits
  3. defineExpose et useAttrs
  4. Importer et utiliser des composables dans script setup
← Retour à Vue Academy