Maison > interface Web > js tutoriel > Explication détaillée de l'utilisation des événements v-on dans Vue.js

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

php中世界最好的语言
Libérer: 2018-04-14 15:55:00
original
2600 Les gens l'ont consulté

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<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

  }

 }

})

Copier après la connexion

É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

1

this.$emit('increment')

Copier après la connexion

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

1

v-on:increment="incrementTotal"

Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal