Oddajanje dogodkov v Vue

Kot že veste, se podatki premikajo od starševskih komponent k podrejenim. Poglejmo zdaj, kako lahko podrejene komponente komunicirajo s starševskimi. To naredimo z oddajanjem dogodkov. Poglejmo v praksi.

Recimo, da ima starševska komponenta določeno metodo:

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

Posredujmo to metodo kot parameter v podrejeno komponento:

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

Določimo oddani dogodek v nastavitvi emits:

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

Naredimo zdaj v podrejeni komponenti gumb, ki bo obravnaval klik nanj:

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

Naredimo ročje klik:

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

Zdaj v ročju klik naredimo, da se pokliče starševska funkcija. Za to oddajmo dogodek s funkcijo $emit, kot parameter podajmo ime oddanega dogodka:

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