Conseils pour utiliser provide et inject dans Vue pour transférer des données des composants ancêtres vers les composants descendants

Vue est un framework frontal très flexible et puissant qui fournit de nombreuses fonctions pratiques, notamment provide et inject. Ces deux fonctions peuvent nous aider à transférer des données des composants ancêtres vers les composants descendants, ce qui est très pratique. Cependant, utiliser ces fonctionnalités n’est pas très simple, surtout pour les débutants. Dans cet article, j'expliquerai comment utiliser ces fonctionnalités pour implémenter des techniques de transmission de données des composants ancêtres aux composants descendants.

Que sont fournir et injecter ?

Dans Vue, provide et inject sont une paire d'options de composant utilisées pour transmettre des données des composants ancêtres aux composants descendants. L'option provide permet à un composant ancêtre de fournir des données à tous ses composants descendants, tandis que l'option inject permet à un composant descendant d'injecter des données dans ses composants ancêtres.

Comment utiliser provide et inject

La méthode de base d'utilisation de provide et inject est la suivante :

1. Pour fournir des données pour composants ancêtres, veuillez utiliser l'option provide

Utilisez l'option provide dans les composants ancêtres pour fournir des données. La valeur de provide doit être un objet. Le nom de propriété de l'objet peut être arbitraire, mais la valeur de la propriété doit être un objet de données ou une fonction de propriété calculée. Par exemple :

Vue.component('ancestor-component', {
  provide: {
    name: 'Alice',
    age: 20,
    address: {
      city: 'Beijing',
      district: 'Haidian'
    },
    calcSalary: function () {
      return 10000
    }
  },
  // ...
})

Dans cet exemple, nous utilisons provide pour fournir plusieurs éléments de données : nom, âge, adresse et calcSalary. Parmi eux, calcSalary est une fonction d'attribut calculée qui renvoie le résultat du calcul du salaire. Ces valeurs sont disponibles dans les composants descendants.

2. Pour recevoir des données dans les composants descendants, utilisez l'option d'injection

Utilisez l'option d'injection dans les composants descendants pour recevoir des données. La valeur de cette option est un tableau ou un objet contenant les données de l'option provide du composant ancêtre. Par exemple :

Vue.component('descendant-component', {
  inject: {
    name: 'name',
    age: 'age',
    address: 'address',
    calcSalary: 'calcSalary'
  },
  mounted: function () {
    console.log(this.name) // Alice
    console.log(this.age) // 20
    console.log(this.address.city) // Beijing
    console.log(this.address.district) // Haidian
    console.log(this.calcSalary()) // 10000
  }
})

Dans cet exemple, nous utilisons l'option inject pour recevoir les données dans l'option provide du composant ancêtre. Notez que la valeur de inject est un objet, la clé de l'objet est le nom d'attribut du composant descendant et la valeur est le nom d'attribut correspondant du composant ancêtre fourni. Par exemple, dans le code ci-dessus, le nom correspond à « nom », l'âge correspond à « âge », l'adresse correspond à « adresse » et calcSalary correspond à « calcSalary ».

Note

1. provide et inject ne peuvent transmettre des données qu'entre les composants parent et enfant. Si vous souhaitez transmettre des données entre des composants frères, vous pouvez envisager d'utiliser Vuex ou un bus d'événements (EventBus).
2. Lorsque vous utilisez provide et inject, faites attention à la dénomination des noms d'attributs. Si les noms de propriété sont identiques, la valeur de propriété reçue par le composant descendant sera la valeur de propriété fournie par le composant ancêtre. Si les noms de propriété sont différents, la valeur de propriété reçue par le composant descendant ne sera pas définie.
3. Lorsque vous utilisez provide et inject, faites attention aux problèmes de type de données. Les données fournies doivent utiliser des types de référence tels que des objets ou des fonctions, plutôt que des types simples. En effet, les types simples créent de nouveaux espaces mémoire lors de l'attribution de valeurs, de sorte que les modifications apportées au composant enfant n'affecteront pas la valeur du composant parent.

Conclusion

L'utilisation de provide et inject dans Vue peut facilement permettre aux composants ancêtres de transmettre des données aux composants descendants. Si vous développez un grand projet Vue et que vous devez laisser le composant source transmettre des données au composant descendant, les fonctions provide et inject seront fréquemment utilisées pendant le processus de développement du projet. Ce qu'il faut noter, ce sont les précautions mentionnées précédemment. L'utilisation flexible de provide et inject peut rendre votre projet de meilleure qualité et plus efficace.

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!