Comment utiliser des événements personnalisés pour implémenter la communication entre les composants dans Vue

Vue est un framework frontal populaire qui offre de nombreuses fonctionnalités pratiques, dont des événements personnalisés. Les événements personnalisés sont un moyen de communication entre les composants Vue, permettant aux développeurs de partager facilement des données et des événements entre différents composants.

Vue fournit un moyen simple de créer des événements personnalisés. Nous pouvons utiliser la méthode $emit() dans l'instance Vue pour déclencher des événements personnalisés et utiliser la directive v-on dans le composant qui doit recevoir l'événement pour écouter le événement. . Ci-dessous, je présenterai en détail comment utiliser des événements personnalisés pour implémenter la communication entre les composants dans Vue.

1. Créer une instance Vue

Nous devons d'abord créer une instance Vue, qui servira d'instance racine de notre application. Dans ce cas, nous devons enregistrer tous les composants enfants que nous utiliserons.

// main.js
import Vue from 'vue'
import App from './App.vue'
import ChildComponent from './components/ChildComponent.vue'

Vue.component('child-component', ChildComponent)

new Vue({
  el: '#app',
  render: h => h(App)
})

Dans cet exemple, nous avons enregistré un composant personnalisé appelé "child-component".

2. Déclencher un événement personnalisé

Ensuite, dans un certain composant, nous devons déclencher un événement personnalisé. Nous pouvons utiliser la méthode $emit() dans l'instance Vue pour accomplir cette tâche. La méthode $emit() déclenchera un événement personnalisé spécifié et transmettra un paramètre arbitraire.

Par exemple, nous pourrions déclencher un événement personnalisé après la soumission d'un formulaire, en l'enregistrant dans une variable appelée "subowned" :

// ChildComponent.vue
<template>
  <div>
    <form @submit.prevent="submitForm">
      <!-- 表单输入 -->
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
<script>
export default {
  methods: {
    submitForm() {
      // 保存表单数据
      // ...
      this.$emit('submitted', formData)
    }
  }
}
</script>

Dans cet exemple, nous avons écouté "submit" à l'aide de l'événement de directive v-on, et dans Avec la méthode submitForm(), un événement personnalisé nommé « soumis » a été déclenché via la méthode $this.$emit() et les données du formulaire ont été transmises.

3. Écoute des événements personnalisés

Maintenant, nous devons écouter l'événement personnalisé que nous venons de déclencher dans un autre composant. Afin d'accomplir cette tâche, nous pouvons utiliser la directive v-on dans l'instance Vue pour écouter l'événement.

Par exemple, nous pouvons souhaiter afficher les données du formulaire qui viennent d'être soumises dans un autre composant :

// AnotherComponent.vue
<template>
  <div>
    Submitted form data: {{ submittedData }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      submittedData: null
    }
  },
  mounted() {
    this.$on('submitted', data => {
      this.submittedData = data
    })
  }
}
</script>

Dans cet exemple, nous utilisons la méthode $this.$on() pour écouter le nom dans le hook de cycle de vie Mounted() function Un événement personnalisé pour « soumis ». Lorsque l'événement est déclenché, nous enregistrons les données transmises dans la propriété data du composant.

4. Livraison d'événements personnalisés

Dans Vue, les événements personnalisés peuvent être livrés dans la hiérarchie des composants, ce qui signifie qu'un composant peut déclencher un événement via la méthode $emit(), et cet événement sera transmis le long de la hiérarchie des composants. Les structures sont transmises vers le haut jusqu'à ce qu'elles soient capturées par un composant parent ou jusqu'à ce qu'une instance Vue soit atteinte.

Si nous écoutons un événement personnalisé dans un composant parent, nous pouvons alors déclencher l'événement directement à partir du composant enfant sans définir explicitement l'événement dans le composant enfant.

Par exemple, nous pouvons définir un gestionnaire d'événements dans un composant parent et le transmettre au composant enfant :

// ParentComponent.vue
<template>
  <div>
    <child-component @submitted="handleSubmittedData" />
  </div>
</template>
<script>
export default {
  methods: {
    handleSubmittedData(data) {
      // 处理表单数据
      // ...
    }
  }
}
</script>

Dans cet exemple, nous définissons une méthode appelée "handleSubmitteData" dans le composant parent et la passons. Elle est transmise au composant enfant nommé « composant-enfant ». Lorsqu'un composant enfant déclenche un événement personnalisé appelé « soumis », l'événement est transmis dans la hiérarchie des composants jusqu'à ce qu'il soit intercepté par le composant parent.

Résumé

Dans Vue, les événements personnalisés sont un moyen simple de communiquer entre les composants. Nous pouvons utiliser la méthode $emit() dans l'instance Vue pour déclencher des événements personnalisés et utiliser la directive v-on dans le composant qui doit recevoir l'événement pour écouter l'événement. De plus, les événements personnalisés peuvent être transmis dans la hiérarchie des composants, permettant aux composants parents d'écouter les événements des composants enfants et de gérer directement les événements.

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!