Come passare dati o metodi da un componente figlio a uno genitore in Vue?

In Vue.js, il meccanismo di eventi viene generalmente utilizzato per trasmettere dati o chiamare metodi dal componente figlio a quello genitore.

Il componente figlio può inviare un evento con i dati necessari usando $emit, e il componente genitore ascolta questo evento e reagisce di conseguenza.

Esempio:

<!-- Componente genitore -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Dati dal figlio:', payload);
    }
  }
}
</script>

<!-- Componente figlio -->
<template>
  <button @click="sendData">Invia dati al genitore</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', { message: 'Ciao, genitore!' });
    }
  }
}
</script>

In questo modo, il componente figlio non chiama direttamente i metodi del genitore, ma segnala un evento, e il genitore decide cosa farne. Questo supporta il principio di flusso di dati unidirezionale e semplifica la gestione dello stato.