Emitowanie zdarzeń w Vue

Jak już wiesz, dane przepływają od komponentów rodzicielskich do potomnych. Przyjrzyjmy się teraz, jak komponenty potomne mogą komunikować się z rodzicielskimi. Odbywa się to za pomocą emitowania zdarzeń. Spójrzmy na praktyczny przykład.

Załóżmy, że w komponencie rodzicielskim znajduje się pewna metoda:

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

Przekażmy tę metodę jako parametr do komponentu potomnego:

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

Zadeklarujmy emitowane zdarzenie w opcji emits:

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

Stwórzmy teraz w komponencie potomnym przycisk, który będzie obsługiwał kliknięcie:

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

Stwórzmy obsługę kliknięcia:

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

Sprawmy teraz, aby w obsłudze kliknięcia wywołała się funkcja rodzicielska. Aby to zrobić, wyemitujmy zdarzenie za pomocą funkcji $emit, podając jako jej parametr nazwę emitowanego zdarzenia:

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