Communication des composants Vue : utilisation de $emit et $on pour une communication d'événements personnalisée

Communication des composants Vue : utilisez $emit et $on pour une communication d'événements personnalisée

Dans les applications Vue, la communication des composants est une partie très importante. Grâce à la communication entre composants, nous pouvons transmettre des données, déclencher des événements, etc. entre différents composants. Le framework Vue offre diverses façons de communiquer entre les composants. L'une des méthodes les plus courantes consiste à utiliser $emit et $on pour la communication d'événements personnalisés.

Dans Vue, chaque composant peut déclencher un événement personnalisé via la méthode $emit et transmettre des données à d'autres composants. D'autres composants peuvent écouter cet événement personnalisé via $on et exécuter la logique correspondante lorsque l'événement est déclenché.

Regardons un exemple simple, en supposant que nous avons deux composants : l'un est le composant parent et l'autre est le composant enfant Child. Nous espérons que lorsque vous cliquerez sur le bouton du composant enfant, le composant parent sera averti pour effectuer le traitement correspondant.

Tout d'abord, nous devons définir un bouton dans le sous-composant et déclencher un événement personnalisé lorsque le bouton est cliqué :

<template>
  <button @click="sendData">点击我触发事件</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('customEvent', { data: 'hello' });
    }
  }
};
</script>

Dans le code ci-dessus, le sous-composant définit un bouton et le transmet dans l'événement click du bouton $emit. pour déclencher un événement personnalisé nommé 'customEvent' et transmettre un objet contenant des données { data: 'hello' }.

Ensuite, dans le composant parent, nous devons écouter cet événement personnalisé et exécuter la logique correspondante lorsque l'événement est déclenché. Nous pouvons utiliser this.$on dans la fonction hook de cycle de vie du composant parent créée pour écouter cet événement personnalisé :

<template>
  <div>
    <p>{{ message }}</p>
    <child-component @customEvent="handleCustomEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.$on('customEvent', this.handleCustomEvent);
  },
  methods: {
    handleCustomEvent(data) {
      this.message = data;
    }
  }
};
</script>

Dans le code ci-dessus, le composant parent introduit d'abord le composant enfant ChildComponent et utilise

Maintenant, nous avons terminé la communication entre le composant enfant et le composant parent. Lorsque vous cliquez sur le bouton du composant enfant, l'événement personnalisé 'customEvent' est déclenché et les données sont transmises au composant parent via this.$emit. Une fois que le composant parent aura reçu les données, celles-ci seront enregistrées dans la variable de message et affichées dans le modèle.

En plus d'utiliser this.$on pour écouter des événements personnalisés, nous pouvons également utiliser this.$once pour écouter des événements personnalisés, de sorte qu'une fois l'événement déclenché une fois, la surveillance sera automatiquement supprimée. De plus, Vue fournit également la méthode this.$off pour supprimer manuellement l'écouteur.

Résumé :
La communication d'événements personnalisés via $emit et $on est une méthode de communication de composants courante dans Vue. Nous pouvons déclencher un événement personnalisé et transmettre des données via this.$emit dans le composant d'envoi, puis écouter l'événement personnalisé via this.$on dans le composant de réception et exécuter la logique correspondante lorsque l'événement est déclenché. Cette approche peut nous aider à établir une communication flexible entre les composants et à améliorer la réutilisabilité et la maintenabilité du code.

Ce qui précède est un exemple de code et des instructions pour utiliser $emit et $on pour une communication d'événement personnalisée. J'espère que cela pourra vous aider à mieux comprendre et appliquer la communication des composants Vue.

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!