Emitovanje događaja u Vue

Kao što već znate, podaci se kreću od roditeljskih ka podređenim komponentama. Pogledajmo sada kako podređene komponente mogu da komuniciraju sa roditeljskim. To se postiže emitovanjem dogadjaja. Hajde da to vidimo u praksi.

Neka u roditeljskoj komponenti postoji neka metoda:

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

Prosledimo ovu metodu kao parametar u podređenu komponentu:

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

Napišimo emitovani događaj u opciji emits:

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

Hajde sada u podređenoj komponenti da napravimo dugme koje će obrađivati klik na njega:

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

Napravimo obrađivač klika:

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

Hajde sada u obrađivaču klika da nateramo da se pozove roditeljska funkcija. Za ovo ćemo emitovati događaj pomoću funkcije $emit, kao njen parametar navodeći ime emitovanog događaja:

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