Emitování událostí ve Vue

Jak již víte, data proudí z rodičovských komponent do dětských. Podívejme se nyní, jak mohou dětské komponenty komunikovat s rodičovskými. To se dělá pomocí emitování událostí. Podívejme se na to v praxi.

Nechť v rodičovské komponentě je nějaká metoda:

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

Předáme tuto metodu jako parametr do dětské komponenty:

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

Nastavíme emitovanou událost v konfiguraci emits:

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

Udělejme nyní v dětské komponentě tlačítko, které bude zpracovávat kliknutí na něj:

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

Vytvořme obslužnou rutinu kliknutí:

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

Nyní v obslužné rutině kliknutí způsobme, aby se zavolala rodičovská funkce. K tomu emitujeme událost pomocí funkce $emit, jako její parametr uvedeme jméno emitované události:

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