Sündmuste Emiteerimine Vue-s

Nagu te juba teate, liiguvad andmed vanemkomponentidelt lastele. Vaatame nüüd, kuidas lapskomponendid saavad suhelda vanemkomponentidega. Seda tehakse sündmuste emiteerimise abil. Vaatame seda praktikas.

Oletame, et vanemkomponendis on mingi meetod:

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

Edastame selle meetodi parameetrina lapskomponenti:

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

Kirjutame emiteeritava sündmuse seadistusse emits:

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

Teeme nüüd lapskomponendis nupu, mis töötleb sellele klõpsamist:

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

Teeme klõpsu töötleja:

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

Paneme nüüd klõpsu töötlejas vanemfunktsiooni käivituma. Selleks emiteerime sündmuse funktsiooni $emit abil, selle parameetriks määrates emiteeritava sündmuse nime:

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