Ko dara $emit metode Vue.js?

$emit metode tiek izmantots, lai ģenerētu lietotāja definētus notikumus no bērna komponenta. Tas ir galvenais veids, kā bērna komponents mijiedarbojas ar vecāka komponentu Vue vienvirziena datu plūsmā. Tas ļauj bērna komponentam paziņot vecākam, ka ir noticis kāds notikums, un, ja nepieciešams, nodot tam datus:

Darba princips:

1. Bērna komponentā izsauc $emit('eventName', payload):
   • eventName - virkne, kas norāda uz notikuma nosaukumu:
   • payload (neobligāti) - jebkuri dati, kas jānodod vecāka komponentam:
2. Vecāka komponentā, izmantojot bērna komponentu, šis notikums tiek klausīts ar v-on direktīvu vai īso formu @:
3. Kad bērna komponenta ģenerē norādīto notikumu, tiek izpildīts atbilstošais apstrādātājs vecāka komponentā:

Piemērs:

Bērna komponents (ChildComponent.vue):

<template>
  <button @click="handleClick">Nospied mani</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Ģenerē notikumu `buttonClicked` bez payload
      this.$emit('buttonClicked');
    }
  }
}
</script>

Vecāka komponents (ParentComponent.vue):

<template>
  <!-- Klausām notikumu `buttonClicked` -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Šī metode tiks izpildīta, kad bērna komponents ģenerēs `buttonClicked` notikumu
      console.log('Bērna komponenta poga ir nospiesta!');
    }
  }
}
</script>

$emit ļauj saglabāt vienvirziena datu plūsmas principu, novēršot tiešas vecāka stāvokļa izmaiņas bērna komponentā. Bērna komponents tikai signalizē par notikumu, bet stāvokļa izmaiņas notiek vecāka komponentā.