Τι κάνει η μέθοδος $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 በአንደኛ አቅጣጫ የመረጃ እንቅስቃሴ መሠረትን እንደሚያስቀመጥ ይፈቅዳል፣ እና ከህጻን ክፍል በቀጥታ የሁኔታ ለውጥ ማድረግ እንደሚከለክል ይከላከላል። ህጻን ክፍል ብቻ ምንም እንደሆነ ምልክት ይሰጣል፣ እና እንደ ሁኔታ እና ለውጥ እንደሚፈፀም በወላጅ ክፍል ይፈፅማል።