Čo robí metóda $emit vo Vue.js?

Metóda $emit saťahuje vlastné udalosti z dieťaťa komponentu. Je to hlavný spôsob, ako dieťa komponent komunikuje so svojím rodičom v Vue, v jednom smere toku dát. Umožňuje dieťaťu oznámiť rodičovi, že sa stalo nejaké udalosti, a v prípade potreby mu odovzdať dáta.

Princíp fungovania:

1. V dieťaťu komponent $emit('názovUdalosti', payload) sa volá.
   • názovUdalosti - reťazec, názov udalosti, ktorá bude generovaná.
   • payload (nepovinné) - akékoľvek dáta, ktoré chcete odovzdať rodičovskému komponentu.
2. V rodičovskom komponente, pri použití dieťaťa komponentu, sa počúva táto udalosť pomocou direktívy v-on alebo skrátenej formy @.
3. Keď je udalosť so zadaným názvom generovaná dieťaťom komponentom, vykoná sa príslušný handler v rodičovskom komponente.

Príklad:

Dieťa komponent (ChildComponent.vue):

<template>
  <button @click="handleClick">Klikni na mňa</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Generujeme udalosť 'buttonClicked' bez payload
      this.$emit('buttonClicked');
    }
  }
}
</script>

Rodičovský komponent (ParentComponent.vue):

<template>
  <!-- Počúvame udalosť 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Táto metóda sa vykoná, keď dieťaťo komponent vygeneruje 'buttonClicked'
      console.log('Tlačidlo v dieťaťu bolo stlačené!');
    }
  }
}
</script>

$emit umožňuje zachovať princíp jednostranného toku dát, zabraňuje priamej zmene stavu rodiča zo strany dieťaťa. Dieťa len signalizuje, že sa niečo stalo, a spracovanie a zmena stavu sa vykonávajú v rodičovskom komponente.