Comment utiliser le modificateur d'événement .stop dans Vue pour arrêter le bouillonnement d'événements

Le bouillonnement d'événement signifie que lorsqu'un élément déclenche un événement, l'événement remontera de l'élément au nœud racine de l'élément, déclenchant les fonctions de traitement d'événement de tous les éléments parents passants. Parfois, nous devons contrôler le déclenchement des événements et gérer uniquement les événements de l'élément actuel et non ceux de son élément parent. Vue fournit le modificateur d'événement ".stop" pour arrêter le bouillonnement d'événements. Cet article présentera en détail comment utiliser le modificateur d'événement ".stop" dans Vue pour arrêter le bouillonnement d'événements.

Dans Vue, les modificateurs d'événements sont des instructions se terminant par ".", qui peuvent être utilisées pour contrôler le comportement par défaut des événements ou implémenter un traitement d'événements spéciaux. La structure d'un modificateur d'événement est la suivante :

@event.modifier="method"

où "event" est le nom de l'événement, "modifier" est le modificateur d'événement , et "method" » est le nom de la fonction de rappel. Lorsque vous utilisez le modificateur d'événement ".stop", vous pouvez l'ajouter après le nom de l'événement :

@event.stop="method"

De cette façon, lorsque le Quand un élément déclenche l'événement, l'événement ne bouillonnera pas vers son nœud d'élément parent, mais s'arrêtera au nœud d'élément actuel.

Ce qui suit est un exemple spécifique. Supposons que nous ayons un composant Vue contenant une liste imbriquée. Chaque élément de la liste est un bouton cliquable, il doit apparaître. pour afficher les détails de l'article. À ce stade, nous devons utiliser le modificateur d'événement ".stop" pour empêcher l'événement de clic de bouillonner :

template:`

<li v-for="item in items" :key="item.id">
  <button @click.stop="showModal(item)">Show Details</button>
  <div v-if="item.id===selectedItemId">{{item.details}}</div>
  <ul v-if="item.children.length>0">
    <child-list :items="item.children"></child-list>
  </ul>
</li>

< ;/ul>
`,
méthodes :{
showModal(item){

this.selectedItemId=item.id;
// show modal

}
}

at Dans le code ci-dessus, lorsque l'utilisateur clique sur un bouton, la méthode showModal est déclenchée et l'identifiant de l'élément est transmis à la méthode. Dans le même temps, le modificateur d'événement ".stop" est ajouté pour empêcher l'événement de bouillonner, garantissant que seul l'événement de clic du bouton actuel est déclenché et ne bouillonne pas vers son élément parent.

En général, il est très simple d'utiliser le modificateur d'événement ".stop" dans Vue pour arrêter le bouillonnement d'événement. Il vous suffit d'ajouter ".stop" après le nom de l'événement. En maîtrisant le mécanisme de modification d'événements de Vue, nous pouvons contrôler plus précisément le comportement de divers événements et apporter une meilleure expérience utilisateur à nos applications.

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!