Šta radi metoda $emit u Vue.js?

Metoda $emit koristi se za generisanje prilagođenih događaja iz detetovog komponenta. To je glavni način na koji detetov komponent komunicira sa roditeljskim u Vue-u, u jednostranom toku podataka. Omogućava detetu da obavesti roditelja da se dogodio događaj i, po potrebi, da mu prosledi podatke.

Princip rada:

1. U detetovom komponentu, poziva se $emit('imeDogađaja', payload).
   • imeDogađaja - niz, naziv događaja koji će biti generisan.
   • payload (neobavezno) - bilo koji podaci koje želite da prosledite roditeljskom komponentu.
2. U roditeljskom komponentu, pri korišćenju detetovog komponenta, prati se ovaj događaj pomoću direktive v-on ili skraćenog oblika @.
3. Kada detetov komponent generiše događaj sa zadatim imenom, izvršava se odgovarajući handler u roditeljskom komponentu.

Primer:

Detetov komponent (ChildComponent.vue):

<template>
  <button @click="handleClick">Klikni me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Generišemo događaj 'buttonClicked' bez payload-a
      this.$emit('buttonClicked');
    }
  }
}
</script>

Roditeljski komponent (ParentComponent.vue):

<template>
  <!-- Slušamo događaj 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Ova metoda će se izvršiti kada detetov komponent generiše 'buttonClicked'
      console.log('Dugme u detetovom komponentu je pritisnuto!');
    }
  }
}
</script>

$emit omogućava održavanje principa jednostranog toka podataka, sprečavajući direktnu promenu stanja roditelja od strane detetovog komponenta. Detetov komponent samo signalizira da se nešto dogodilo, a obrada i promena stanja se odvijaju u roditeljskom komponentu.