Методи $emit дар Vue.js чӣ мекунад?

$emit усулӣ фарзанд компонентидан мўҳрҳои махсусро тавлид мекунад. Ин асосии роҳе мебошад, ки фарзанд компоненти Vue-да бо волидайн дар як самтӣ равиши маълумот муошират мекунад. Ин имкон медиҳад, ки фарзанд огоҳ кунад, ки ҳодиса рӯй додааст ва дар ҳолати зарурӣ маълумотро ба волидайн супорад.

Принсипи кор:

1. Дар фарзанд компоненти $emit('номиҲодиса', payload) даъват мешавад.
   • номиҲодиса - сатр, номи ҳодисае, ки тавлид мешавад.
   • payload (ихтиёрӣ) - ҳар гуна маълумоте, ки мехоҳед ба волидайн супоред.
2. Дар волидайн компоненти, вақте ки фарзанд компонент истифода мешавад, ин ҳодиса бо истифода аз директиваи v-on ё шакли кӯтоҳ @ гӯш карда мешавад.
3. Вақте ки ҳодиса бо номи муайян аз ҷониби фарзанд компонент тавлид мешавад, коркардкунандаи мувофиқ дар волидайн иҷро мешавад.

Масалан:

Фарзанд компонент (ChildComponent.vue):

<template>
  <button @click="handleClick">Маро клик кунед</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Тавлид кардани ҳодисаи 'buttonClicked' бе payload
      this.$emit('buttonClicked');
    }
  }
}
</script>

Волидайн компонент (ParentComponent.vue):

<template>
  <!-- Гӯш кардани ҳодисаи 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Ин усул иҷро мешавад, вақте ки фарзанд компонент 'buttonClicked' тавлид мекунад
      console.log('Тугмаи дар фарзанд компоненти клик шуд!');
    }
  }
}
</script>

$emit имкон медиҳад, ки принсипи равиши маълумот дар як самтӣ нигоҳ дошта шавад, ва аз тағир додани мустақими ҳолати волидайн аз ҷониби фарзанд ҷилавгирӣ мекунад. Фарзанд танҳо огоҳ мекунад, ки ҳодиса рӯй додааст, ва идоракунӣ ва тағир додани ҳолат дар волидайн сурат мегирад.