Jak předat data nebo metody z dětského komponentu na rodičovský v Vue?

V Vue.js se obvykle používá mechanismus událostí k přenosu dat nebo volání metod z dětského komponentu na rodičovský.

Dětský komponent může pomocí $emit odeslat událost s potřebnými daty a rodičovský komponent ji poslouchá a na ni reaguje.

Pří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('Data od dítěte:', payload);
    }
  }
}
</script>

<!-- Dětský komponent -->
<template>
  <button @click="sendData">Odeslat data rodiči</button>
</template>

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

Tímto způsobem dětský komponent nevolá přímo metody rodiče, ale oznamuje událost, a rodič rozhodne, co s tím udělat. To podporuje princip jednosměrného toku dat a zjednodušuje správu stavu.