Mida teeb $emit meetod Vue.js-s?

$emit meetodit kasutatakse kasutaja määratletud sündmuste genereerimiseks lapse komponendist. See on peamine viis, kuidas lapse komponent suhtleb vanemkomponentiga Vue'is ühesuunalise andmevoo raames. See võimaldab lapse komponendil teavitada vanemat, et mingi sündmus on toimunud, ning vajadusel edastada talle andmeid:

Tööpõhimõte:

1. Lapse komponendis kutsutakse $emit('eventName', payload):
   • eventName - string, mis näitab loodava sündmuse nime:
   • payload (valikuline) - mis tahes andmed, mida tuleb vanemkomponentile edastada:
2. Vanemkomponent kasutab lapse komponenti ja kuulab seda sündmust v-on direktiivi või lühikese vormi @ abil:
3. Kui lapse komponent genereerib määratud nimega sündmuse, täidetakse vastav töötleja vanemkomponentis:

Näide:

Lapse komponent (ChildComponent.vue):

<template>
  <button @click="handleClick">Vajuta mind</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Loo sündmus `buttonClicked` ilma payloadita
      this.$emit('buttonClicked');
    }
  }
}
</script>

Vanema komponendi (ParentComponent.vue):

<template>
  <!-- Kuulame sündmust `buttonClicked` -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // See meetod käivitatakse, kui lapse komponent genereerib `buttonClicked` sündmuse
      console.log('Lapse komponendi nupp on vajutatud!');
    }
  }
}
</script>

$emit võimaldab säilitada ühesuunalise andmevoo põhimõtte, vältides vanema otsest muutmist lapse komponendis. Lapse komponent ainult signaalib toimuva kohta, samas kui seisundi muutmine toimub vanema komponendis.