Frontend Academy · Lezione

Props ed eventi dei componenti

Passare i dati verso il basso con defineProps, emettere eventi verso l’alto con defineEmits e validare le props con i vincoli type e required.

Props ed eventi dei componenti è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Props in Vue 3

Le props passano i dati dal componente genitore al componente figlio. In <script setup>, utilizzi defineProps() per dichiararle. Le props sono di sola lettura nel componente figlio: non le modifichi mai direttamente.

<script setup lang="ts">
const props = defineProps<{
  title: string;
  count?: number;
  variant?: 'primary' | 'secondary';
}>();
</script>

<template>
  <h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>

withDefaults per i valori predefiniti delle props

Racchiuda defineProps() in withDefaults() per fornire valori predefiniti.

<script setup lang="ts">
const props = withDefaults(defineProps<{
  count?: number;
  variant?: 'primary' | 'secondary';
}>(), {
  count: 0,
  variant: 'primary'
});
</script>

Passaggio delle props nel template

Passi i valori statici come normali attributi. Passi i valori dinamici con v-bind (:). Passi gli attributi booleani indicandone solo la presenza, senza valore.

<MyButton title="Submit" :count="activeCount" variant="primary" />
<Toggle :disabled="isLoading" />

Emits — Comunicazione dal figlio al genitore

I componenti figli comunicano verso l'alto emettendo eventi. Utilizzi defineEmits() per dichiarare quali eventi il componente può emettere, quindi chiami la funzione emit restituita.

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string];
  close: [];
  submit: [data: FormData];
}>();

function handleSubmit(data: FormData) {
  emit('submit', data); // fire the event
}
</script>

Ascolto degli emits nel genitore

Utilizzi @eventName nel template per ascoltare gli eventi personalizzati provenienti dai componenti figli.

<SearchInput
  @update="searchTerm = $event"
  @submit="handleSearch"
/>

v-model con componenti personalizzati

v-model su un componente personalizzato è la forma abbreviata di :modelValue + @update:modelValue. Il componente deve accettare la prop ed emettere l'evento di aggiornamento.

<!-- Parent: -->
<MyInput v-model="email" />

<!-- MyInput.vue: -->
<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>

<template>
  <input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
</template>

Binding multipli con v-model

Vue 3 supporta più v-model su un singolo componente con modifier denominati.

<UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />

Convalida delle props

Nell'Options API o nella dichiarazione delle props a runtime, aggiunga vincoli per il tipo, l'obbligatorietà e la funzione validator. defineProps() basato su TypeScript fornisce questa convalida in fase di compilazione.

Props e data — Flusso unidirezionale

Vue impone un flusso unidirezionale dei dati: le props passano dal genitore al figlio; gli eventi passano dal figlio al genitore. Se un figlio deve modificare dei dati, emette un evento e il genitore gestisce l'aggiornamento.

Gli slot come alternativa alle props

Per i contenuti che devono essere HTML o componenti, non semplici dati, utilizzi gli slot. Il genitore fornisce il contenuto tra i tag del componente; il figlio lo visualizza con <slot />.

<!-- Parent: -->
<Card title="Hello">
  <p>This content goes in the default slot.</p>
</Card>

<!-- Card.vue: -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <slot />  <!-- renders the p tag -->
  </div>
</template>

Verifica rapida

Come comunica un componente Vue figlio un evento al proprio genitore?

Riepilogo: props ed emits

defineProps per dichiarare props tipizzate. withDefaults per i valori predefiniti. Le props sono di sola lettura nei componenti figli. defineEmits per dichiarare e tipizzare gli eventi emessi. @eventName nel genitore per ascoltarli. v-model = :modelValue + @update:modelValue. Flusso unidirezionale dei dati: props verso il basso, eventi verso l'alto. Slot per passare contenuti o frammenti di template.

Domande Frequenti

La lezione «Props ed eventi dei componenti» è gratuita?

Sì — il testo completo di «Props ed eventi dei componenti» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Props ed eventi dei componenti»?

Passare i dati verso il basso con defineProps, emettere eventi verso l’alto con defineEmits e validare le props con i vincoli type e required. Eserciti Frontend 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 Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend 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 4 di 4.

Quanto tempo richiede la lezione «Props ed eventi dei componenti»?

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 Frontend Academy?

Sì. Ogni lezione Frontend 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

← Torna a Frontend Academy