Ako preniesť údaje alebo metódy z detského komponentu na rodičovský vo Vue?

V Vue.js sa mechanizmus udalostí zvyčajne používa na prenos dát alebo volanie metód z detského komponentu na rodičovský.

Detský komponent môže odoslať udalosť s potrebnými dátami pomocou $emit, a rodičovský komponent ju počúva a na ňu reaguje.

Príklad:

<!-- Rodičovský komponent -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Dáta od dieťaťa:', payload);
    }
  }
}
</script>

<!-- Detský komponent -->
<template>
  <button @click="sendData">Odoslať dáta rodičovi</button>
</template>

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

Týmto spôsobom detský komponent nevolá priamo metódy rodiča, ale oznamuje udalosť, a rodič rozhodne, čo s tým urobiť. To podporuje princíp jednosmerného toku dát a zjednodušuje správu stavu.