Explication détaillée sur l'utilisation du composant multi-niveaux Vue provide/inject

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du composant multi-niveaux Vue provide/inject. Quelles sont les précautions lors de l'utilisation du composant multi-niveaux Vue provide/inject. cas pratique, jetons un coup d'oeil.

provide / inject est une nouvelle méthode ajoutée dans la version 2.2 , qui peut injecter des dépendances (un contenu) d'un composant ancêtre à tous les descendants.

provider/inject : pour faire simple, fournissez des variables via le fournisseur dans le composant parent, puis injectez les variables via inject dans le composant enfant.

Avertissement officiel de Vue :

provide et inject fournissent principalement des cas d'utilisation pour les bibliothèques de plug-ins/composants de haut niveau. Il n'est pas recommandé de l'utiliser directement dans le code de l'application.

Bien sûr, l'avertissement n'est qu'un avertissement, vous pouvez l'utiliser normalement.

La méthode d'utilisation est très similaire au paquet cadeau combiné de données et d'accessoires :

var Provider = {
 provide: {
 foo: 'bar'
 },
 // ...
}
var Child = {
 inject: ['foo'],
 created () {
 console.log(this.foo) // => "bar"
 }
 // ...
}

La seule différence est que vous n'êtes pas obligé de la transmettre couche par couche. le bus d'événements utilisé dans le passé peut résoudre des problèmes profonds, mais il rendra l'ensemble de la composition d'émission d'événements trop déroutante et difficile à maintenir. L'utilisation de provide / inject peut garantir la clarté du flux de données unidirectionnel parent-enfant.

Le fournisseur/consommateur de contexte dans React a également le même effet. Comme je ne l'ai pas encore utilisé en détail, je n'ai qu'une compréhension limitée de React lui-même. laissez-vous en apprendre davantage ultérieurement. Étudiants intéressés Vous pouvez lire la documentation pour le savoir.

Article de référence :

Document officiel de Vue
Provide/Inject in Vue 2.2

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. des choses passionnantes, veuillez faire attention à php Autres articles connexes sur le site chinois !

Lecture recommandée :

Explication détaillée des étapes pour ajouter, supprimer et modifier des éléments JavaScript DOM

Vue utilise vee-validate pour vérifier le formulaire en détail

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!