0Pricing
Vue Academy · Lezione

defineProps e defineEmits

Props tipizzate con defineProps (), defineEmits (), withDefaults() per i valori predefiniti

defineProps e defineEmits è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Comunicare tra componenti

I componenti ricevono dati tramite le props e inviano messaggi verso l'alto tramite gli eventi. In <script setup> li dichiara con le macro defineProps e defineEmits.

defineProps con la forma runtime

Può dichiarare le props con un oggetto runtime, proprio come nell'Options API. Funziona sia in JS sia in TS.

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

defineProps con un generic TypeScript

In TypeScript, passi un tipo tramite il generic per ottenere props più semplici da scrivere e verificate dai tipi. Il compilatore trasforma il tipo in dichiarazioni runtime.

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

Props facoltative con ?

Aggiunga un punto interrogativo a una proprietà del tipo per renderla facoltativa. Le props facoltative possono essere undefined se il genitore non le passa.

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

Valori predefiniti con withDefaults

La forma basata sui tipi non offre un punto in cui definire i valori predefiniti, quindi Vue fornisce withDefaults. Racchiuda defineProps e fornisca un oggetto con i valori predefiniti.

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

Usare le props nel template

Le props sono reattive. Vi faccia riferimento direttamente nel template oppure tramite props.x nello script.

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

Le props sono di sola lettura

Non modifichi mai una prop all'interno del componente figlio. Le props seguono una sola direzione: dal genitore al figlio. Se ha bisogno di una copia locale modificabile, la ricavi con computed o con un ref locale.

Dichiarare gli eventi con defineEmits

defineEmits dichiara quali eventi un componente può emettere. La forma runtime accetta un array di nomi di evento.

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

Eventi tipizzati con TypeScript

La forma basata sui tipi consente di specificare i nomi degli eventi e i tipi dei payload. In questo modo vengono rilevati errori come l'emissione di un argomento del tipo sbagliato.

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

Emettere un evento con un payload

Chiami emit con il nome dell'evento e i dati desiderati. Il genitore ascolta con @submit e riceve il payload.

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

Mettere tutto insieme

Un componente figlio riceve una prop title ed emette un evento submit. Il genitore reagisce a entrambi: dati unidirezionali, puliti e tipizzati, insieme a eventi espliciti.

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

Verifica rapida

Verifichi la sua comprensione di props ed emits.

Riepilogo

Ha imparato a gestire l'input e l'output dei componenti in <script setup>:

  • defineProps dichiara gli input (un oggetto runtime o un generic TS).
  • Usi ? per le props facoltative e withDefaults per i valori predefiniti.
  • Le props sono di sola lettura e unidirezionali.
  • defineEmits dichiara gli eventi, con nomi e payload tipizzati facoltativamente.

Domande Frequenti

La lezione «defineProps e defineEmits» è gratuita?

Sì — il testo completo di «defineProps e defineEmits» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «defineProps e defineEmits»?

Props tipizzate con defineProps (), defineEmits (), withDefaults() per i valori predefiniti Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «defineProps e defineEmits»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Introduzione a script setup
  2. defineProps e defineEmits
  3. defineExpose e useAttrs
  4. Importazione e utilizzo dei composable in script setup
← Torna a Vue Academy