Tutoriel de base VUE3 : événements personnalisés à l'aide de Vue.js

Vue.js est un framework JavaScript populaire qui offre de nombreuses fonctionnalités pratiques, il est donc très utile lors du développement d'applications Web. Le système d'événements personnalisés de Vue.js le rend plus flexible et permet une meilleure réutilisation du code grâce au déclenchement et à la gestion des événements de composants. Dans cet article, nous verrons comment utiliser des événements personnalisés avec Vue.js.

La base des événements personnalisés dans Vue.js

Dans Vue.js, nous pouvons écouter les événements DOM via la directive v-on. Par exemple, on peut avoir le code suivant pour écouter l'événement click du bouton :

<button v-on:click="onClick">Click me!</button>

Le "onClick" est une méthode composant, qui sera appelée lorsque le bouton sera cliqué. Ici, "onClick" est la clé de la méthode $emit. La méthode $emit est une méthode de Vue.js qui peut déclencher des événements personnalisés. Lors de l'utilisation de la méthode $emit, son premier paramètre spécifie le nom de l'événement personnalisé et les autres paramètres sont transmis à l'écouteur.

Ce qui suit est un exemple d'utilisation de la méthode $emit pour déclencher un événement personnalisé :

// 子组件.vue
<div>
  <button v-on:click="$emit('custom-event', 'some data')">Click me!</button>
</div>

// 父组件.vue
<child-component v-on:custom-event="handleCustomEvent"></child-component>

methods: {
  handleCustomEvent (data) {
    console.log(data) // logs "some data"
  }
}

Dans le composant enfant, nous utilisons un bouton pour déclencher un événement personnalisé, où Le premier paramètre est "custom-event" et le deuxième paramètre correspond aux données transmises à l'écouteur. Dans le composant parent, nous utilisons la directive v-on pour écouter l'événement "custom-event" et le lier à la fonction handleCustomEvent, qui sera appelée lorsque l'événement est déclenché. handleCustomEvent reçoit le paramètre data qui lui est transmis et imprime ces données dans la console.

Utilisez des événements personnalisés pour compléter la communication inter-composants

Le système d'événements personnalisés de Vue.js peut être utilisé pour transmettre des données entre les composants. Voici un exemple d'utilisation d'événements personnalisés pour compléter la communication entre les composants :

// 子组件A.vue
<template>
  <div>
    <button v-on:click="$emit('update-counter', counter)">Increase counter</button>
  </div>
</template>

<script>
export default {
  data () {
    return { counter: 0 }
  }
}
</script>

// 子组件B.vue
<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <child-component-a v-on:update-counter="updateCounter"></child-component-a>
  </div>
</template>

<script>
import ChildComponentA from './ChildComponentA.vue'

export default {
  components: { ChildComponentA },
  data () {
    return { counter: 0 }
  },
  methods: {
    updateCounter (counter) {
      this.counter = counter
    }
  }
}
</script>

Dans cet exemple, nous avons deux composants : ChildComponentA et ChildComponentB. ChildComponentA est un composant de bouton qui augmente le compteur Lorsque vous cliquez sur le bouton, il déclenche un compteur de mise à jour d'événement personnalisé via la méthode $emit et transmet la valeur actuelle du compteur au composant parent en tant que paramètre.

ChildComponentB est le composant compteur, dans lequel nous utilisons ChildComponentA, écoutons l'événement personnalisé update-counter et le lions à la méthode updateCounter. La méthode updateCounter définit la valeur du compteur transmise sur le compteur de variable d'état du composant, afin que nous puissions afficher la valeur actuelle dans le composant.

Summary

Les événements personnalisés de Vue.js sont une fonctionnalité puissante qui permet une communication efficace entre les composants. En plus de déclencher des événements au sein des composants, Vue.js prend également en charge le déclenchement d'événements à l'échelle mondiale. Vous pouvez utiliser la méthode $emit dans chaque instance de Vue.js, pas seulement dans le composant.

Lors de l'utilisation d'événements personnalisés, nous devons suivre les meilleures pratiques de Vue.js, qui consiste à éviter toute confusion avec les événements DOM du langage lui-même et à les utiliser pour la communication directe des composants. Lors de la mise en œuvre d'une communication inter-composants, il est préférable de ne pas partager de variables d'état entre les composants et d'utiliser plutôt des événements personnalisés pour transmettre des données.

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!