Cosa fa il metodo $emit in Vue.js?

Il metodo $emit viene utilizzato per generare eventi personalizzati da un componente figlio. È il modo principale in cui un componente figlio interagisce con il suo componente genitore in Vue, in un flusso di dati unidirezionale. Permette al componente figlio di notificare al genitore che si è verificato un evento e, se necessario, di passargli dei dati.

Principio di funzionamento:

1. Nel componente figlio, si chiama $emit('nomeDellEvento', payload).
   • nomeDellEvento - stringa, nome dell'evento che verrà generato.
   • payload (opzionale) - qualsiasi dato si voglia passare al componente genitore.
2. Nel componente genitore, quando si utilizza il componente figlio, si ascolta questo evento con la direttiva v-on o la forma abbreviata @.
3. Quando l'evento con il nome specificato viene generato dal componente figlio, viene eseguito il gestore corrispondente nel genitore.

Esempio:

Componente figlio (ChildComponent.vue):

<template>
  <button @click="handleClick">Cliccami</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Genera l'evento 'buttonClicked' senza payload
      this.$emit('buttonClicked');
    }
  }
}
</script>

Componente genitore (ParentComponent.vue):

<template>
  <!-- Ascoltiamo l'evento 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Questo metodo verrà eseguito quando il componente figlio genererà 'buttonClicked'
      console.log('Il pulsante nel componente figlio è stato premuto!');
    }
  }
}
</script>

$emit permette di mantenere il principio di flusso di dati unidirezionale, evitando modifiche dirette allo stato del genitore da parte del componente figlio. Il componente figlio segnala solo che qualcosa è successo, e la gestione e la modifica dello stato avviene nel componente genitore.