Kā pārsūtīt datus vai metodes no bērna komponenta uz vecāka komponentu Vue?

Vue.js parasti notiekuma mehānisms tiek izmantots, lai pārsūtītu datus vai izsauktu metodes no bērnu komponenta uz vecāku.

Bērnu komponenta var izmantot $emit, lai nosūtītu notikumu ar nepieciešamajiem datiem, un vecāku komponenta to klausās un reaģē uz to.

Piemērs:

<!-- Vecāku komponenta -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Bērna dati:', payload);
    }
  }
}
</script>

<!-- Bērnu komponenta -->
<template>
  <button @click="sendData">Sūtīt datus vecākam</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', { message: 'Sveiki, vecāk!' });
    }
  }
}
</script>

Šādā veidā bērnu komponenta tieši neizsauc vecāka metodes, bet paziņo par notikumu, un vecāks lemj, ko ar to darīt. Tas atbalsta vienvirziena datu plūsmas principu un vienkāršo stāvokļa pārvaldību.