Események kibocsátása Vue-ban

Ahogy már tudod, az adatok a szülő komponensekből áramlanak a gyermek komponensekbe. Nézzük most meg, hogyan kommunikálhatnak a gyermek komponensek a szülőikkel. Ezt események kibocsátásával tehetjük meg. Lássuk a gyakorlatban.

Tegyük fel, hogy a szülő komponensben van egy metódus:

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

Adjuk át ezt a metódust paraméterként a gyermek komponensnek:

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

Írjuk be a kibocsátandó eseményt a emits beállításba:

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

Most készítsünk a gyermek komponensben egy gombot, amely kezeli a rá kattintást:

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

Készítsünk kattintáskezelőt:

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

Most a kattintáskezelőben érjük el, hogy a szülői függvény meghívódjon. Ehhez bocsássunk ki egy eseményt a $emit függvénnyel, melynek paramétere a kibocsátott esemény neve:

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