Emitovanie udalostí vo Vue

Ako už viete, dáta prúdia od nadradených komponentov k podradeným. Pozrime sa teraz, ako môžu podradené komponenty komunikovať s nadradenými. Robí sa to pomocou emitovania udalostí. Pozrime sa na to v praxi.

Nech v nadradenom komponente je nejaká metóda:

App.vuemethods: {
  func() {
    alert('xxx');
  }
}

Odovzdajme túto metódu ako parameter do podradeného komponentu:

App.vue<template>
  <User @show="func" />
</template>

Zapíšme emitovanú udalosť v nastavení emits:

components/User.vueexport default {
  emits: ['show'],
  data() {
    return {
      
    }
  }
}

Urobme teraz v podradenom komponente tlačidlo, ktoré bude spracúvať klik naň:

components/User.vue<template>
  <button @click="handle">btn</button>
</template>

Urobme obsluhu kliknutia:

components/User.vuemethods: {
  handle() {
    
  }
}

Teraz v obsluhe kliknutia spôsobme, aby sa zavolala nadradená funkcia. Na to emitnime udalosť pomocou funkcie $emit, ako jej parameter uvedieme názov emitovanej udalosti:

components/User.vuemethods: {
  handle() {
    this.$emit('show');
  }
}