Co robi metoda $emit w Vue.js?

Metoda $emit służy do generowania własnych zdarzeń z komponentu potomnego. Jest to główny sposób interakcji komponentu potomnego z rodzicem w Vue, w jednokierunkowym przepływie danych. Pozwala potomkowi powiadomić rodzica, że zdarzyło się coś, i w razie potrzeby przekazać mu dane.

Zasada działania:

1. W komponencie potomnym wywołuje się $emit('nazwaZdarzenia', payload).
   • nazwaZdarzenia - ciąg znaków, nazwa zdarzenia, które zostanie wygenerowane.
   • payload (opcjonalnie) - dowolne dane, które chcemy przekazać do komponentu rodzica.
2. W komponencie rodzica, podczas korzystania z komponentu potomnego, nasłuchuje się tego zdarzenia za pomocą dyrektywy v-on lub skróconej formy @.
3. Gdy zdarzenie o podanej nazwie zostanie wygenerowane przez komponent potomny, wykonywany jest odpowiedni obsługiwacz w komponencie rodzica.

Przykład:

Komponent potomny (ChildComponent.vue):

<template>
  <button @click="handleClick">Kliknij mnie</button>
</template>

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

Komponent rodzica (ParentComponent.vue):

<template>
  <!-- Nasłuchujemy zdarzenia 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Ta metoda zostanie wywołana, gdy komponent potomny wygeneruje 'buttonClicked'
      console.log('Przycisk w komponencie potomnym został naciśnięty!');
    }
  }
}
</script>

$emit pozwala zachować zasadę jednokierunkowego przepływu danych, zapobiegając bezpośrednim zmianom stanu rodzica przez komponent potomny. Komponent potomny jedynie sygnalizuje, że coś się stało, a obsługa i zmiana stanu odbywa się w komponencie rodzica.