Vue.js'te $emit yöntemi ne yapar?

$emit yöntemi, çocuk bileşenden özel olaylar üretmek için kullanılır. Vue'da çocuk bileşenin, tek yönlü veri akışında ana bileşeniyle etkileşime geçmesinin temel yoludur. Çocuk bileşen, gerçekleşen bir olayı ana bileşene bildirmek ve gerekirse ona veri iletmek için kullanılır.

Çalışma prensibi:

1. Çocuk bileşende $emit('olayAdi', payload) çağrılır.
   • olayAdi - oluşturulacak olayın adı olan string.
   • payload (isteğe bağlı) - ana bileşene iletmek istediğiniz herhangi bir veri.
2. Ana bileşende, çocuk bileşen kullanılırken, bu olay v-on direktifi veya kısa biçimi @ ile dinlenir.
3. Belirtilen isimdeki olay, çocuk bileşen tarafından üretildiğinde, ilgili olay işleyicisi çalıştırılır.

Örnek:

Çocuk bileşen (ChildComponent.vue):

<template>
  <button @click="handleClick">Bana tıkla</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 'buttonClicked' olayını payload olmadan üretir
      this.$emit('buttonClicked');
    }
  }
}
</script>

Ana bileşen (ParentComponent.vue):

<template>
  <!-- 'buttonClicked' olayını dinliyoruz -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Bu metod, çocuk bileşen 'buttonClicked' ürettiğinde çalışır
      console.log('Çocuk bileşendeki butona tıklandı!');
    }
  }
}
</script>

$emit, tek yönlü veri akışını korumayı sağlar, böylece çocuk bileşenin ebeveynin durumunu doğrudan değiştirmesini engeller. Çocuk sadece olan biteni sinyal eder, ve durumun işlenmesi ve değiştirilmesi ebeveyn bileşende gerçekleşir.