Ce face metoda $emit în Vue.js?

Metoda $emit este utilizată pentru a genera evenimente personalizate dintr-un component copil. Este principalul mod în care un component copil interacționează cu componenta părinte în Vue, într-un flux de date unidirecțional. Permite componentului copil să notifice părintele că a avut loc un eveniment și, dacă este necesar, să îi transmită date.

Principiul de funcționare:

1. În componenta copil, se apelează $emit('numeEveniment', payload).
   • numeEveniment - șir de caractere, numele evenimentului care va fi generat.
   • payload (opțional) - orice date pe care doriți să le transmiteți componentului părinte.
2. În componenta părinte, la utilizarea componentei copil, se ascultă acest eveniment cu ajutorul directivei v-on sau forma scurtă @.
3. Când evenimentul cu numele specificat este generat de componenta copil, se execută handler-ul corespunzător în componenta părinte.

Exemplu:

Componenta copil (ChildComponent.vue):

<template>
  <button @click="handleClick">Apasă-mă</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Generăm evenimentul 'buttonClicked' fără payload
      this.$emit('buttonClicked');
    }
  }
}
</script>

Componenta părinte (ParentComponent.vue):

<template>
  <!-- Ascultăm evenimentul 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Această metodă va fi executată când componenta copil va genera 'buttonClicked'
      console.log('Butonul din componenta copil a fost apăsat!');
    }
  }
}
</script>

$emit permite menținerea principiului fluxului de date unidirecțional, evitând modificarea directă a stării părintelui de către componenta copil. Componenta copil doar semnalează că s-a întâmplat ceva, iar procesarea și modificarea stării se realizează în componenta părinte.