Une brève introduction au traitement des événements de base dans Vue

Cet article vous apporte des connaissances pertinentes sur vue, qui présente principalement des problèmes liés au traitement des événements de base. Le traitement des événements Vue est un aspect nécessaire de chaque projet Vue. Il est utilisé pour capturer les entrées des utilisateurs, partager des données et de nombreuses autres façons créatives. Jetons-y un coup d'œil ensemble, j'espère que cela sera utile à tout le monde.

【Recommandations associées : Tutoriel vidéo javascript, Tutoriel vue.js】

La gestion des événements Vue est un aspect nécessaire de chaque projet Vue. Il est utilisé pour capturer les entrées des utilisateurs, partager des données et de nombreuses autres façons créatives.

Dans cet article, je couvrirai les bases et fournirai quelques exemples de code pour gérer les événements.

Gestion de base des événements

En utilisant la directive v-on (@ pour faire court), nous pouvons écouter les événements DOM et exécuter des méthodes de gestion ou du Javascript en ligne :

<div v-on:click=&#39;handleClick&#39; />
<!-- 相当于 -->
<div @click=&#39;handleClick&#39; />

Nous aborderons certains des événements les plus courants que vous souhaiterez peut-être capturer , single Cliquez ici pour une liste complète des événements DOM.

Émission d'événements personnalisés

Un cas d'utilisation courant dans n'importe quel framework Web est de vouloir qu'un composant enfant puisse émettre des événements vers son composant parent. Cela permettra une liaison de données bidirectionnelle.

Un exemple de ceci est l'envoi de données d'un composant d'entrée vers un formulaire parent.

La syntaxe d'émission des événements est différente selon que l'on utilise l'API Options ou l'API Composition.

Dans l'API Options, nous pouvons simplement appeler ceci.$emit(eventName, payload):

export default {
  methods: {
    handleUpdate() {
      this.$emit('update', 'Hello World')
    }
  }
}

Cependant, l'API Composition n'a pas cela. Au lieu de cela, nous pouvons accéder à la méthode d'émission directement en utilisant la méthode de configuration de Vue3. Le deuxième paramètre de la méthode

setup est la variable de contexte, qui contient trois attributs : attrs, slot et submit.

Tant que l'objet contextuel est importé, submit peut être appelé avec les mêmes paramètres que l'API Options.

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit('update', 'Hello World')
    }
    return { handleUpdate }
  } 
}

Une façon de ranger votre code est d'utiliser la déstructuration d'objets pour importer directement des émissions. Cela ressemble à ceci.

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit('update', 'Hello World')
    }
    return { handleUpdate }
  } 
}

Que nous utilisions l'API Options ou l'API Composition, notre composant parent écoute les événements personnalisés de la même manière.

<HelloWorld @update=&#39;inputUpdated&#39;/>

Si la méthode que nous émettons reçoit également une valeur, nous pouvons la capturer de deux manières différentes - selon que nous travaillons en ligne ou utilisons une autre méthode.

Tout d'abord, nous pouvons utiliser la valeur $event transmise dans le modèle.

<HelloWorld @update=&#39;inputUpdated($event)&#39;/>

Deuxièmement, si nous utilisons une méthode pour gérer l'événement, la valeur transmise sera automatiquement transmise à notre méthode comme premier paramètre.

<HelloWorld @update=&#39;inputUpdated&#39;/>
Que signifie calculé en vue ?
Quelles technologies sont utilisées pour créer des projets vue-cli
Quels frameworks peuvent être utilisés pour vue ?
Comment implémenter une application monopage (SPA) avec Laravel8+Vuejs
Parlons de la façon dont les développeurs Vue2 peuvent démarrer rapidement avec Vue3