Comment utiliser provide et inject pour la communication des composants dans Vue ?

Comment utiliser provide et inject pour la communication des composants dans Vue ?

Dans Vue, la communication entre les composants est un enjeu très important. Vue fournit une variété de méthodes pour transmettre des données et communiquer entre les composants. Dans certains scénarios spécifiques, l'utilisation de provide et inject est un moyen très pratique et efficace d'établir la communication entre les composants.

provide et inject sont une paire d'options de correspondance qui permettent aux composants ancêtres d'injecter une dépendance dans tous les composants descendants sans la transmettre manuellement couche par couche. Ils peuvent former un « arbre d’injection de dépendances » entre ancêtres et descendants.

Les composants qui fournissent des dépendances utilisent l'option provide et les composants qui reçoivent des dépendances utilisent l'option inject.

Regardons un exemple ci-dessous. Supposons qu'il y ait un composant parent A et deux composants enfants B et C. Nous devons transmettre les données du composant parent A aux composants enfants B et C.

Le code du composant parent A est le suivant :

<template>
  <div>
    <child-b></child-b>
    <child-c></child-c>
  </div>
</template>

<script>
import ChildB from './ChildB.vue'
import ChildC from './ChildC.vue'

export default {
  components: {
    ChildB,
    ChildC
  },
  provide() {
    return {
      dataFromA: this.dataFromA
    }
  },
  data() {
    return {
      dataFromA: 'Hello'
    }
  }
}
</script>

Le sous-composant B peut recevoir les données fournies par le composant parent A via l'option d'injection. Le code est le suivant :

<template>
  <div>
    <p>Child B</p>
    <p>Data from A: {{ dataFromA }}</p>
  </div>
</template>

<script>
export default {
  inject: ['dataFromA']
}
</script>

De même, le sous-composant C peut également recevoir le composant parent A. via l'option d'injection. Le code des données fournies est le suivant :

<template>
  <div>
    <p>Child C</p>
    <p>Data from A: {{ dataFromA }}</p>
  </div>
</template>

<script>
export default {
  inject: ['dataFromA']
}
</script>

De cette façon, les données "dataFromA" fournies par le composant parent A seront automatiquement injectées dans les composants enfants B et C, et les composants enfants B et C peuvent utiliser directement ces données.

Il convient de noter que provide et inject ne peuvent être utilisés que pour la communication entre les composants ancêtres et les composants descendants, et non pour la communication entre les composants frères.

Ce qui précède est un exemple simple d'utilisation de provide et inject pour la communication des composants. L'utilisation de provide et inject peut réduire efficacement la complexité du transfert de données entre les composants et améliorer la maintenabilité et la réutilisation du code. Dans certains scénarios spécifiques, l'utilisation de provide et inject constitue un moyen très pratique et efficace de communication entre composants.

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!