Ի՞նչ է անում $emit մեթոդը Vue.js-ում։

$emit մեթոդը օգտագործվում է օգտագործողի կողմից սահմանված իրադարձություններ ստեղծելու համար երեխա կոմպոնենտից: Սա հիմնական միջոցն է, որով երեխա կոմպոնենտը շփվում է ծնող կոմպոնենտի հետ Vue-ի միակ ուղղությամբ տվյալների հոսքի մեջ: Այն թույլ է տալիս երեխա կոմպոնենտին տեղեկացնել ծնողին, որ ինչ-որ իրադարձություն տեղի է ունեցել, և անհրաժեշտության դեպքում փոխանցել տվյալներ:

Աշխատանքի սկզբունքը՝

1. Երեխա կոմպոնենտում կանչվում է $emit('eventName', payload):
   • eventName - տող, որը նշում է ստեղծվող իրադարձության անունը:
   • 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 թույլ է տալիս պահպանել միակ ուղղությամբ տվյալների հոսքի սկզբունքը, կանխելով ծնողի ուղղակի փոփոխությունը երեխա կոմպոնենտից: Երեխա կոմպոնենտը միայն ազդանշան է տալիս տեղի ունեցածի մասին, իսկ վիճակի փոփոխությունը կատարվում է ծնող կոմպոնենտում։