Πώς μεταβιβάζω δεδομένα ή μεθόδους από ένα παιδικό συστατικό σε ένα γονικό στο Vue;

Στο Vue.js, ο μηχανισμός γεγονότων χρησιμοποιείται συνήθως για τη μεταφορά δεδομένων ή την κλήση μεθόδων από το παιδικό συστατικό προς το γονικό.

Το παιδικό συστατικό μπορεί να στείλει ένα γεγονός με τα απαραίτητα δεδομένα χρησιμοποιώντας $emit, και το γονικό συστατικό ακούει αυτό το γεγονός και αντιδρά σε αυτό.

Παράδειγμα:

<!-- Γονικό συστατικό -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Δεδομένα από το παιδί:', payload);
    }
  }
}
</script>

<!-- Παιδικό συστατικό -->
<template>
  <button @click="sendData">Αποστολή δεδομένων στον γονέα</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', { message: 'Γειά σου, γονέα!' });
    }
  }
}
</script>

Έτσι, το παιδικό συστατικό δεν καλεί άμεσα τις μεθόδους του γονέα, αλλά αναφέρει ένα γεγονός, και ο γονέας αποφασίζει τι θα κάνει με αυτό. Αυτό υποστηρίζει την αρχή της μονοκατευθυντικής ροής δεδομένων και απλοποιεί τη διαχείριση της κατάστασης.