Émission d'événements dans Vue

Comme vous le savez déjà, les données circulent des composants parents vers les composants enfants. Voyons maintenant comment les composants enfants peuvent communiquer avec les composants parents. Cela se fait en émettant des événements. Voyons cela en pratique.

Supposons que le composant parent ait une certaine méthode :

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

Passons cette méthode en paramètre au composant enfant :

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

Déclarons l'événement émis dans l'option emits :

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

Créons maintenant dans le composant enfant un bouton qui gérera le clic sur lui :

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

Créons un gestionnaire de clic :

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

Faisons maintenant en sorte que dans le gestionnaire de clic la fonction parent soit appelée. Pour cela, émettons un événement en utilisant la fonction $emit, en spécifiant le nom de l'événement émis comme paramètre :

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