Utiliser $listeners pour transmettre les fonctions de gestion d'événements dans Vue

Dans Vue, il y a souvent des composants imbriqués et des événements doivent être transmis entre ces composants imbriqués. Dans Vue, l'événement $emit est utilisé pour la communication d'événements entre les composants.

Cependant, dans certains cas, nous devons transmettre le gestionnaire d'événements d'un composant parent à un composant enfant imbriqué. Dans ce cas, l'utilisation de l'événement $emit n'est pas appropriée. À ce stade, vous pouvez utiliser les $listeners fournis par Vue pour transmettre la fonction de traitement des événements.

Alors, que sont les $listeners ? $listeners est une propriété spéciale dans l'objet instance Vue, qui contient tous les écouteurs/gestionnaires d'événements qui agissent sur le composant.

Grâce à l'attribut $listeners, nous pouvons transmettre la fonction de gestion d'événements définie dans le composant parent au composant enfant imbriqué pour l'utiliser :

1. La fonction de gestion d'événements définie dans le composant parent :

<template>
  <div>
    <button @click="handleClick">Click me</button>
    <child @childClick="$listeners.childClick"></child>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        console.log('parent click')
      }
    }
  }
</script>

2. Recevoir le composant parent dans le composant enfant Fonction de gestionnaire d'événements transmise :

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        this.$emit('childClick')
      }
    }
  }
</script>

De cette façon, la fonction de gestionnaire d'événements définie dans le composant parent peut être transmise au composant enfant pour utilisation.

Il convient de noter que la fonction de gestion des événements transmise dans le composant parent doit être liée à un attribut avec v-on. Dans le même temps, il convient de noter que le nom de l'événement ne peut pas être le même que le nom de l'événement défini par le. composant enfant, sinon un conflit se produira.

De plus, la propriété $listeners contient uniquement les écouteurs d'événements transmis au composant actuel et n'inclut pas les écouteurs transmis aux autres composants enfants du composant parent. Par conséquent, il est important de noter que les gestionnaires d’événements liés aux composants enfants doivent être correctement propagés aux autres composants enfants du composant parent.

En bref, utiliser $listeners dans Vue est un moyen pratique et efficace de transmettre des fonctions de gestion d'événements, ce qui nous permet de communiquer les événements de manière plus flexible entre les composants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!