Emissione di eventi in Vue

Come già sapete, i dati fluiscono dai componenti genitori ai componenti figli. Ora vediamo come i componenti figli possono comunicare con quelli genitori. Questo viene fatto emettendo eventi. Vediamo come nella pratica.

Supponiamo che nel componente genitore ci sia un metodo:

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

Passiamo questo metodo come parametro al componente figlio:

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

Registriamo l'evento emesso nella opzione emits:

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

Ora creiamo nel componente figlio un pulsante che gestirà il click su di esso:

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

Creiamo il gestore del click:

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

Ora facciamo in modo che nel gestore del click venga chiamata la funzione genitore. Per fare questo emettiamo un evento utilizzando la funzione $emit, specificando come suo parametro il nome dell'evento emesso:

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