Explication détaillée de l'utilisation des événements v-on dans Vue.js

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des événements v-on dans Vue.js. Quelles sont les précautions lors de l'utilisation des événements v-on dans Vue.js. Voici des cas pratiques. . Jetons un coup d'oeil.

Chaque instance de Vue implémente l'interface Events, à savoir :

Utilisez $on(eventName) pour écouter les événements

Utilisez $emit(eventName) pour déclencher l'événement

Le système d'événements de Vue est séparé de l'API EventTarget du navigateur. Bien qu'ils fonctionnent de la même manière, $on et $emit ne sont pas des alias pour addEventListener et dispatchEvent.

De plus, le composant parent peut utiliser directement v-on où le composant enfant est utilisé pour écouter les événements déclenchés par le composant enfant.

Voici un exemple tiré d'un document :

Mis à jour le 11 avril 2017

<p id="counter-event-example">
 <p>{{ total }}</p>
 <button-counter v-on:increment="incrementTotal"></button-counter>
 <button-counter v-on:increment="incrementTotal"></button-counter>
</p>
Vue.component('button-counter', {
 template: '<button v-on:click="increment">{{ counter }}</button>',
 data: function () {
  return {
   counter: 0
  }
 },
 methods: {
  increment: function () {
   this.counter += 1
   this.$emit('increment')
  }
 },
})
new Vue({
 el: '#counter-event-example',
 data: {
  total: 0
 },
 methods: {
  incrementTotal: function () {
   this.total += 1
  }
 }
})

Étape 1 :

Tout le monde le voit en premier. En fait, après le rendu, l'étiquette personnalisée de l'étape 4 devient comme ceci : Étape 1. Le même code, nous devrions donc commencer à partir de là pour comprendre la liaison d'événements entre les composants parents et enfants. Dans le sous-composant, l'événement click (clic) est lié à l'incrément de la fonction (c'est-à-dire l'étape 2 dans l'image ) C'est facile à comprendre ici, c'est-à-dire). , le du sous-composant est cliqué Le bouton déclenchera la fonction d'incrémentation

située dans le composant enfant. Étape 2 et Étape 3 :

L'exécution de la fonction d'incrémentation est déclenchée et une instruction appelant la fonction est exécutée à l'étape 2

this.$emit('increment')

Jetons un coup d'oeil à la documentation

vm.$emit( ​​​​event, […args] ) : Déclenchez un événement sur l'instance actuelle. Des paramètres supplémentaires seront transmis au rappel de l'auditeur

Qu'est-ce que cela signifie ici ? C'est ainsi que je le dis dans ma propre langue vernaculaire :

Grâce à cette fonction, le composant parent peut savoir quelle fonction le composant enfant a appelée, this.$emit('increment') est similaire au composant enfant disant "salut, papa, j'ai appelé ma propre fonction d'incrémentation" au composant parent Notify. composant parent

Étape 4 :

En regardant la balise personnalisée définie dans le composant parent, vous pouvez voir

v-on:increment="incrementTotal"

Qu'est-ce que ça veut dire? Expliquons-le en anglais simple

C'est-à-dire : "Enfant, quand tu appelleras la fonction incrément, j'appellerai la fonction incrémentTotal pour te répondre"

À ce stade, nous rappelons l'étape 3. Dans le composant enfant, nous avons utilisé émettre pour notifier. Cela forme donc une réponse mutuelle et un transfert d'informations entre les composants parent et enfant. En fait, pendant le processus de développement, la communication entre les composants parent et enfant est créée. Les composants parent et enfant utilisent également cette méthode. Lorsqu'un composant transmet des informations à un composant enfant, il utilise les paramètres props. Habituellement, les informations transmises par le composant parent ne sont pas modifiées directement dans le composant enfant, et un tel hook est utilisé pour notifier. le composant parent pour modifier certains paramètres

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres. articles connexes sur le site php chinois !

Lecture recommandée :

Comment utiliser les fonctions anonymes JS

nodejs effectue un streaming vidéo en direct basé sur ffmpeg

Étapes détaillées pour définir les styles globaux dans Vue2.0

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!