Co dělá metoda $emit ve Vue.js?

Metoda $emit se používá k generování vlastních událostí z dětského komponentu. Je to hlavní způsob, jak dětský komponent komunikuje se svým rodičovským v Vue v jednom směru toku dat. Umožňuje dítěti oznámit rodiči, že došlo k události, a případně mu předat data.

Princip fungování:

1. V dětském komponentu se volá $emit('názevUdalosti', payload).
   • názevUdalosti - řetězec, název události, která bude generována.
   • payload (nepovinné) - jakákoli data, která chcete předat rodičovskému komponentu.
2. V rodičovském komponentu, při použití dětského komponentu, se poslouchá tato událost pomocí direktivy v-on nebo zkrácené formy @.
3. Když je událost se zadaným názvem generována dětským komponentem, vykoná se odpovídající obsluha v rodičovském komponentu.

Příklad:

Dětský komponent (ChildComponent.vue):

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

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

Rodičovský komponent (ParentComponent.vue):

<template>
  <!-- Posloucháme událost 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Tato metoda bude volána, když dětský komponent vygeneruje 'buttonClicked'
      console.log('Tlačítko v dětském komponentu bylo stisknuto!');
    }
  }
}
</script>

$emit umožňuje zachovat princip jednosměrného toku dat, zabrání přímé změně stavu rodiče dětským komponentem. Dětský komponent pouze signalizuje, že se něco stalo, a zpracování a změna stavu probíhá v rodičovském komponentu.