Kaip perduoti duomenis ar metodus iš vaiko komponento į tėvo komponentą Vue?

Vue.js dažniausiai įvykio mechanizmas naudojamas perduoti duomenis arba iškvieti metodus iš vaiko komponento į tėvo komponentą.

Vaiko komponentas gali naudoti $emit, kad išsiųstų įvykį su reikalingais duomenimis, o tėvo komponentas klausosi šio įvykio ir į jį reaguoja.

Pavyzdys:

<!-- Tėvo komponentas -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

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

<!-- Vaiko komponentas -->
<template>
  <button @click="sendData">Siųsti duomenis tėvui</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', { message: 'Labas, tėti!' });
    }
  }
}
</script>

Šiuo būdu, vaiko komponentas tiesiogiai nekviečia tėvo metodų, o praneša apie įvykį, ir tėvas nusprendžia, ką su juo daryti. Tai palaiko vienpusio duomenų srauto principą ir supaprastina būsenos valdymą.