Conseils pour utiliser provide et inject pour transmettre des méthodes et des événements entre les composants dans Vue

Vue est un excellent framework front-end open source. Il a la capacité de créer rapidement des interfaces utilisateur, de simplifier le processus de développement et d'améliorer l'efficacité du développement de produits. Vue propose diverses façons de transmettre des données, notamment les accessoires, l'émission, $emit, vuex, etc. Utiliser provide et inject au niveau des composants est un moyen plus flexible qui peut nous aider à transmettre des méthodes et des événements entre les composants. Dans cet article, nous nous concentrerons sur les techniques d'utilisation de provide et inject dans Vue pour transmettre des méthodes et des événements entre les composants.

1. Que sont fournir et injecter ?

provide et inject sont des méthodes avancées de livraison de composants dans Vue, qui permettent aux composants parents de transmettre des données aux composants descendants éloignés d'eux-mêmes. Nous pouvons rendre les données accessibles à tous les composants descendants en les fournissant dans le composant ancêtre.

2. Comment utiliser fournir et injecter ?

Utilisons d'abord l'exemple de liaison de la même méthode à plusieurs composants pour expliquer comment utiliser provide et inject.

2.1 Le composant ancêtre fournit des méthodes

Dans le composant ancêtre, nous définissons une méthode et la fournissons à tous les composants descendants. Le code est le suivant :

import { provide } from 'vue'

export default {
  created() {
    const commonMethod = () => { alert('hello world') }
    provide('commonMethod', commonMethod)
  }
}

Ici, nous utilisons la méthode provide pour fournir la méthode commonMethod à tous les composants descendants. Le premier paramètre de la méthode provide est le nom de clé des données fournies et le deuxième paramètre est le contenu spécifique des données fournies.

2.2 Méthode de réception des composants descendants

Après avoir reçu la méthode fournie, nous pouvons l'utiliser dans tous les composants descendants. Le code est le suivant :

import { inject } from 'vue'

export default {
  created() {
    const commonMethod = inject('commonMethod')
    this.$commonMethod = commonMethod
  }
}

Ici, nous utilisons la méthode inject pour recevoir la méthode commonMethod. Le paramètre de la méthode inject est le nom de clé des données fournies et il renverra la valeur des données fournies. Dans le cycle de vie créé, nous lions la méthode commonMethod dans la variable $commonMethod de l'instance à utiliser dans le composant.

3. Comment mettre en place la diffusion d'un événement ?

Lors de la mise en œuvre de la livraison multi-composants d'événements, nous devons utiliser provide et inject pour y parvenir. Ci-dessous, nous prenons comme exemple l'événement consistant à cliquer sur un bouton pour déclencher un composant descendant.

3.1 Le composant ancêtre fournit des événements

Dans le composant ancêtre, nous introduisons une classe d'événements et la fournissons à tous les composants descendants. Le code est le suivant :

import { provide } from 'vue'
import { EventEmitter } from 'events'

export default {
  created() {
    const emitter = new EventEmitter()
    provide('emitter', emitter)
  }
}

Ici, nous créons une nouvelle instance EventEmitter dans le composant ancêtre et la fournissons au composant descendant.

3.2 Les composants descendants écoutent les événements

Dans les composants descendants, nous utilisons la méthode inject pour obtenir l'événement fourni et l'écouter afin que la logique correspondante puisse être exécutée après le l'événement est déclenché. Le code est le suivant :

import { inject } from 'vue'

export default {
  created() {
    const emitter = inject('emitter')
    emitter.on('event', () => {
      console.log('emit event')
    })
  }
}

Ici, nous utilisons la méthode inject pour recevoir l'émetteur d'événement fourni et écouter l'événement 'event' dans le cycle de vie créé. Lorsque l'événement est déclenché, nous exécutons la logique correspondante.

3.3 Déclenchement d'événements

Lors du déclenchement d'un événement, nous devons obtenir l'émetteur et le déclencher. Le code est le suivant :

import { inject } from 'vue'

export default {
  methods: {
    emitEvent() {
      const emitter = inject('emitter')
      emitter.emit('event')
    }
  }
}

Ici, nous avons utilisé la méthode inject pour obtenir l'émetteur d'événement fourni, et avons déclenché l'événement 'event' dans la méthode submitEvent.

4. Summary

Grâce à l'introduction de cet article, nous avons appris à utiliser provide et inject pour implémenter la livraison multi-composants de méthodes et événements. L'utilisation de provide et inject au niveau des composants de Vue nous permet de transmettre des données et des événements de manière plus flexible, réduisant ainsi efficacement la complexité des modèles ou des accessoires. Dans le même temps, provide et inject fournissent également des fonctions similaires à DI (injection de dépendances), rendant la conception architecturale de Vue plus évolutive et maintenable.

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!