Jak przekazać dane lub metody z komponentu potomnego do rodzica w Vue?

W Vue.js mechanizm zdarzeń jest zwykle używany do przekazywania danych lub wywoływania metod z komponentu potomnego do rodzica.

Komponent potomny może wysłać zdarzenie z potrzebnymi danymi za pomocą $emit, a komponent rodzica nasłuchuje tego zdarzenia i na nie reaguje.

Przykład:

<!-- Komponent rodzica -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Dane od dziecka:', payload);
    }
  }
}
</script>

<!-- Komponent dziecka -->
<template>
  <button @click="sendData">Wyślij dane do rodzica</button>
</template>

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

W ten sposób, komponent dziecka nie wywołuje bezpośrednio metod rodzica, lecz zgłasza zdarzenie, a rodzic decyduje, co z tym zrobić. To wspiera zasadę jednokierunkowego przepływu danych i upraszcza zarządzanie stanem.