Vue'da çocuk bileşenden ebeveyn bileşene veri veya metodları nasıl aktarılır?

Vue.js'te, genellikle olay mekanizması, çocuk bileşenden ebeveyn bileşene veri iletmek veya metod çağırmak için kullanılır.

Çocuk bileşen, $emit kullanarak gerekli verilerle bir olay gönderebilir ve ebeveyn bileşen bu olayı dinler ve tepki verir.

Örnek:

<!-- Ebeveyn bileşen -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Çocuktan gelen veriler:', payload);
    }
  }
}
</script>

<!-- Çocuk bileşen -->
<template>
  <button @click="sendData">Veriyi ebeveyne gönder</button>
</template>

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

Bu şekilde, çocuk bileşen doğrudan ebeveyn metodlarını çağırmak yerine, bir olay bildirir ve ebeveyn ne yapacağına karar verir. Bu, tek yönlü veri akışını destekler ve durumu yönetmeyi kolaylaştırır.