Cum se transmit date sau metode de la un component copil la unul părinte în Vue?

În Vue.js, mecanismul de evenimente este utilizat de obicei pentru a transmite date sau pentru a apela metode de la componenta copil către componenta părinte.

Componenta copil poate trimite un eveniment cu datele necesare folosind $emit, iar componenta părinte ascultă acest eveniment și reacționează la el.

Exemplu:

<!-- Componenta părinte -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Date de la copil:', payload);
    }
  }
}
</script>

<!-- Componenta copil -->
<template>
  <button @click="sendData">Trimite date părintelui</button>
</template>

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

Astfel, componenta copil nu apelează direct metodele părintelui, ci semnalează un eveniment, iar părintelui îi revine decizia ce să facă cu acesta. Acest lucru susține principiul fluxului de date unidirecțional și simplifică gestionarea stării.