Fournir une fonction et injecter une fonction dans Vue3 : une nouvelle façon de transmettre les données des composants

Avec la sortie officielle de Vue3, de nombreux développeurs ont commencé à essayer la nouvelle version de Vue. L'une des nouvelles fonctionnalités les plus intéressantes concerne les fonctions de fourniture et d'injection, qui rendent le transfert de données entre les composants plus pratique et plus efficace. Cet article présentera l'utilisation et les avantages de la fonction provide et de la fonction inject, ainsi que la manière dont elles modifient la façon dont les données des composants sont transmises.

Utilisation de la fonction provide et de la fonction inject

Dans Vue2, le transfert de données entre les composants repose principalement sur les accessoires et $emit. Le composant parent transmet les données au composant enfant via des accessoires, et le composant enfant transmet les modifications au composant parent via $emit. Cette approche fonctionne bien avec une simple arborescence de composants, mais elle peut devenir fastidieuse lors de la création de hiérarchies de composants complexes dans des applications volumineuses.

Les fonctions de fourniture et d'injection plus pratiques ont été introduites dans Vue3, qui peuvent facilement transmettre des données à tous les sous-composants sans avoir besoin de les transmettre manuellement à chaque niveau. Tout d’abord, jetons un coup d’œil à la fonction provide. Il est défini dans le composant parent et est utilisé pour fournir des données au composant enfant. La fonction provide accepte un objet paire clé-valeur comme paramètre, qui contient les données fournies au composant enfant. Par exemple :

provide() {
  return {
    currentUser: 'John Doe',
    isLoggedIn: true
  }
}

Dans cet exemple, la fonction provide fournit le nom et les données de statut de connexion de l'utilisateur actuel. Ces données peuvent être de tout type : chaînes, nombres, objets, fonctions, etc.

Dans les composants enfants, nous pouvons utiliser la fonction inject pour accéder aux données fournies par le composant parent. inject accepte un tableau de chaînes ou un objet comme paramètre, indiquant à Vue quelles données il souhaite injecter. Par exemple :

inject: ['currentUser', 'isLoggedIn']

Désormais, n'importe où dans le composant enfant, nous pouvons accéder à ces données comme s'il s'agissait des propres données du composant enfant. Par exemple :

console.log(this.currentUser) // John Doe
console.log(this.isLoggedIn) // true

Avantages de la fonction provide et de la fonction inject

Bien que props et $emit puissent être utilisés pour transférer des données entre composants dans Vue2, cette méthode présente plusieurs inconvénients. Premièrement, c'est fastidieux : chaque composant doit recevoir des données manuellement, ce qui prend beaucoup de temps. Deuxièmement, le transfert de données est unidirectionnel : il ne peut être transmis que du composant parent au composant enfant. Si le composant enfant souhaite informer le composant parent des modifications, il doit le faire via $emit. Cela crée une duplication de code et un travail inutile.

Utilisez les fonctions provide et inject pour résoudre ces problèmes. Premièrement, les données fournies par la fonction provide sont accessibles par tous les composants enfants et il n'est pas nécessaire de les transmettre manuellement dans chaque composant. Deuxièmement, cette méthode de transfert de données est bidirectionnelle : les composants enfants peuvent modifier les données, et ces modifications sont reflétées dans le composant parent. De cette façon, le code sera plus propre, plus lisible et plus facile à maintenir.

Remarques sur la fonction provide et la fonction inject

Bien que les fonctions provide et inject fournissent un moyen pratique et efficace de transférer des données entre les composants, il y a plusieurs précautions à retenir :

1. N'abusez pas des fonctions provide et inject. Cette approche peut parfois rendre le code difficile à comprendre et à déboguer. Il est principalement utilisé pour partager l'état entre les composants, sans éviter d'utiliser les accessoires et $emit.
2. Ne comptez pas sur la fonction provide et la fonction inject pour les tests unitaires. Ils sont difficiles à simuler lors de tests et peuvent avoir des effets inattendus d’un test à l’autre.
3. Faites attention à la syntaxe de la fonction provide et de la fonction inject. La fonction provide renvoie un objet, le nom de l'attribut de l'objet spécifie les données à partager et la chaîne du nom de l'attribut est utilisée dans la fonction inject pour injecter les données. Si le nom de la propriété n'existe pas, les données ne peuvent pas être injectées.

Conclusion

La fonction provide et la fonction inject fournies dans Vue3 offrent un moyen plus pratique et efficace de transférer des données entre les composants. Ils nous permettent de partager l’état et facilitent son accès et sa modification. Cependant, nous devons les utiliser avec prudence, en nous assurant qu’ils sont utilisés dans le bon but et qu’ils n’ont pas d’impact négatif sur les tests. En utilisant les fonctions provide et inject, nous pouvons écrire des composants Vue plus simples, plus élégants et plus faciles à maintenir.

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!