Vue.js-də $emit metodu nə edir?

$emit metodu, uşulmuş xüsusi hadisələr yaratmaq üçün istifadə olunur. Bu, Vue-də uşa komponentin, onun valideyn komponenti ilə tək istiqamətli məlumat axını ilə qarşılıqlı əlaqə qurmasının əsas yoludur. Bu, uşa komponentə baş verən hadisəni valideynə bildirməyə və lazım gəldikdə ona məlumat ötürməyə imkan verir.

İş prinsipi:

1. Uşa komponentdə $emit('hadisəAdı', payload) çağırılır.
   • hadisəAdı - yaradılacaq hadisənin adı olan sətir.
   • payload (seçimlidir) - valideyn komponentə ötürmək istədiyiniz hər hansı məlumat.
2. Valideyn komponentdə, uşa komponentindən istifadə edərkən, bu hadisə v-on direktivi və ya qısa formada @ ilə dinlənir.
3. Uşa komponent tərəfindən yaradılan müəyyən adlı hadisə baş verdikdə, valideyn komponentdə müvafiq emalçı icra olunur.

Nümunə:

Uşa komponent (ChildComponent.vue):

<template>
  <button @click="handleClick">Mənə klik et</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // `buttonClicked` hadisəsini payload olmadan yaradırıq
      this.$emit('buttonClicked');
    }
  }
}
</script>

Valideyn komponent (ParentComponent.vue):

<template>
  <!-- `buttonClicked` hadisəsini dinləyirik -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Bu metod uşa komponent `buttonClicked` yaradanda işləyəcək
      console.log('Uşa komponentdəki düymə basıldı!');
    }
  }
}
</script>

$emit tək istiqamətli məlumat axını prinsipini qorumağa imkan verir, uşa komponentin valideynin vəziyyətini birbaşa dəyişməsini qarşısını alır. Uşa komponent sadəcə baş verəni siqnallayır, və vəziyyətin işlənməsi və dəyişdirilməsi valideyn komponentdə həyata keçirilir.