Ką daro $emit metodas Vue.js?

$emit metodas naudojamas kurti vartotojo nustatytus įvykius iš vaiko komponento. Tai pagrindinis būdas, kuriuo vaiko komponentas sąveikauja su tėvo komponentu Vue vienpusiško duomenų srauto kontekste. Jis leidžia vaikui įspėti tėvą, kad įvyko tam tikras įvykis, ir, jei reikia, perduoti jam duomenis:

Veikimo principas:

1. Vaiko komponento metu kviečiama $emit('eventName', payload):
   • eventName - eilutė, nurodanti įvykio pavadinimą:
   • payload (neprivaloma) - bet kokie duomenys, kurie turi būti perduoti tėvo komponentui:
2. Tėvo komponentas, naudodamas vaiko komponentą, klausosi šio įvykio naudodamas v-on direktyvą arba trumpą formą @:
3. Kai vaiko komponentas sukuria nurodytą įvykį, atitinkamas apdorotojas vykdomas tėvo komponento viduje:

Pavyzdys:

Vaiko komponentas (ChildComponent.vue):

<template>
  <button @click="handleClick">Paspausk mane</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Sukuria įvykį `buttonClicked` be payload
      this.$emit('buttonClicked');
    }
  }
}
</script>

Tėvo komponentas (ParentComponent.vue):

<template>
  <!-- Klausome įvykio `buttonClicked` -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Šis metodas bus vykdomas, kai vaiko komponentas sukurs `buttonClicked` įvykį
      console.log('Vaiko komponento mygtukas paspaustas!');
    }
  }
}
</script>

$emit leidžia išlaikyti vienpusiško duomenų srauto principą, užkertant kelią tiesioginiams tėvo pakeitimams vaiko komponento. Vaiko komponentas tik signalizuoja apie įvykį, o būsenos keitimas vyksta tėvo komponento viduje.