Explication détaillée de la façon de gérer les événements dans vue.js

Le tutorielvue.js suivant vous présentera comment utiliser vue.js pour gérer les événements. J'espère qu'il sera utile à tout le monde.

Lorsque vous utilisez Vue pour créer un site Web dynamique, vous souhaiterez probablement qu'il réponde aux événements.

Par exemple, vous souhaiterez peut-être que votre site Web Vue réponde d'une certaine manière si l'utilisateur clique sur un bouton, soumet un formulaire ou même bouge simplement la souris.

Utiliser Vue pour gérer les événements

Nous pouvons intercepter les événements en ajoutant la directive v-on à l'élément DOM concerné. Disons que nous voulons gérer les clics sur un élément de bouton - nous pouvons ajouter ce qui suit à notre modèle Vue :

<button v-on:click="clickHandler"></button>

Notez que nous avons ajouté un paramètre dans la directive et que le paramètre v-on sera ce que nous voulons handle Le nom de l'événement (cliquez dans ce cas).

Nous lions ensuite l'expression à la directive, qui est généralement la méthode que vous souhaitez utiliser pour gérer l'événement. Dans ce cas, nous l'appelons clickHandler.

Conseil : La commande v-on a une forme abrégée pratique @, qui peut être utilisée à la place de v-on::<button @click="clickHandler"></button>.

Types d'événements pouvant être gérés

En plus du clic, quoi d'autre peut-on gérer les événements DOM ?

Vue peut gérer tout type d'événement natif Web ou mobile (ainsi que les événements personnalisés dont nous parlerons plus tard), notamment :

• soumettre

• touche

• glisser

• défilement

Le <🎜 le plus courant > Liste des événements DOM

Méthodes de gestion des événements

Si on lie une méthode à une directive de gestion des événements, on peut maintenant Exécuter du code personnalisé.

Dans cet exemple, restons simples et enregistrons simplement un message sur la console, mais vous pouvez également faire quelque chose de plus intéressant comme afficher/masquer un autre élément, incrémenter un compteur, etc.

<div id="app">
  <button v-on:click="clickHanlder"></button>
</div>

rrree

Objet événement

L'objet événement sera transmis au gestionnaire d'événement, ouvrant plus de possibilités sur la façon de répondre à l'événement. Cet objet contient de nombreuses propriétés et méthodes utiles, notamment des références à l'élément à l'origine de l'événement (event.target), à l'heure à laquelle l'événement s'est produit (event.timeStamp), etc.

new Vue({
  el: "#app",
  methods: {
    clickHandler () {
      console.log("You clicked the button!");
    }
  }
})

Veuillez noter que cet objet est fourni par l'API Web native, et non par Vue, ce sera donc le même objet que vous trouvez en JavaScript pur. Pour plus de commodité, voici la

référence de l'interface d'événement.

Modificateurs d'événements

Un modèle courant dans les applications JavaScript consiste à gérer la soumission des formulaires manuellement au lieu d'utiliser les fonctionnalités natives. Pour ce faire, vous devez utiliser la méthode native PreventDefault de l'événement Submit avant d'exécuter le code de gestion du formulaire, sinon la page sera redirigée avant d'avoir une chance de se terminer.

clickHandler (event) {
  console.log(`The button was clicked at ${event.timeStamp}.`);
}

Vue fournit un modificateur d'événement pour le faire directement à partir du modèle au lieu de le faire manuellement dans un gestionnaire. Notez que les modificateurs sont '.' ajoutés après la directive :

formHandler (event) {
  event.preventDefault();
  // form handling logic
}

Vue fournit plusieurs modificateurs d'événements différents qui sont utiles dans les scénarios courants de gestion d'événements :

• .stop

• .prévenir

• .capture

• soi-même

.
• .once

• .passive

Événement personnalisé

Jusqu'à présent, nous avons discuté de la façon de gérer les événements natifs. Mais Vue est un framework basé sur des composants, alors pouvons-nous faire en sorte que le composant émette ses propres événements ?

Oui, cela peut être très utile. Supposons que vous souhaitiez qu'un composant enfant envoie des données à un composant parent. Nous ne pouvons pas utiliser d'accessoires ici car les données des accessoires sont uniquement transmises du parent à l'enfant et pas autrement.

<form @submit.prevent="formHandler"></form>

La solution est que le composant enfant émette l'événement et que le composant parent écoute l'événement.

Pour ce faire, appelez this.$emit("my-event") depuis le composant enfant lorsque vous souhaitez que l'événement soit émis. Par exemple, disons que nous avons un composant DialogComponent qui doit informer sa page principale parent qu'elle a été fermée :

ParentComponent
 |
 | (data travels down via props, never up)  
 v 
ChildComponent

Le composant parent peut alors gérer les événements personnalisés exactement comme les événements locaux.

export default {
  methods: {
    onClose() {
      this.$emit("dialog-closed");
    }
  }
};

Vous pouvez également envoyer des données dans un événement personnalisé, qui peuvent être reçues via la méthode du gestionnaire :

<div>
  <dialog-component @dialog-closed="eventHandler" />
</div>

onClose() {
  this.$emit("dialog-closed", { time: Date.now() });
}

Conseil : utilisez des noms de cas kebab pour les événements personnalisés ! HTML n'est pas sensible à la casse, donc un nom d'événement en forme de chameau, tel que myEvent, sera source de confusion car myevent est dans le modèle. Par conséquent, il est préférable d’utiliser kebab-case my-event pour éviter toute confusion.

活动巴士

如上所述，子组件可以将事件发送到父组件。但是，如果您希望组件将事件发送到层次结构中的任何其他组件怎么办？例如，同级，祖父母等。

为此，我们可以使用一种称为事件总线的模式。在这里，我们创建了一个单独的Vue实例，以将事件传输到导入该事件的任何组件。

首先，在新的模块文件中创建并导出Vue实例：

import Vue from "vue";
export default new Vue();

接下来，将总线导入到您要发出事件的组件中。您可以使用$emit总线Vue实例的方法。

import eventBus from "./eventBus";

export default {
  ...
  methods: {
    myMethod () {
      eventBus.$emit("my-event")
    }
  }
}

最后，将总线导入到您想听事件的组件中。然后，您应该在代码中的某个位置设置侦听器。我建议您使用生命周期挂钩，就像created您可以在此处访问组件实例一样。

这是通过$on总线方法完成的，该方法带有两个参数-您要监听的事件和一个回调。

import eventBus from "./eventBus";

export default {
  ...
  created () {
    eventBus.$on("my-event", () => {
      console.log("my-event called on global event bus");
    });
  }
}

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

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!