Comment utiliser provide/inject dans Vue pour implémenter un transfert de données non réactif entre les composants ancêtres et les composants descendants

Vue fournit deux API de haut niveau : provide et inject, qui peuvent aider les développeurs à effectuer un transfert de données non réactif entre les composants ancêtres et les composants descendants. Ces données peuvent être non seulement des valeurs primitives, des tableaux et des objets, mais aussi des fonctions et des classes.

Dans Vue, le transfert de données entre composants est généralement divisé en deux types : le transfert de données réactif entre les composants parents et enfants et entre les composants frères. Cependant, nous devons parfois transmettre des données non réactives entre ancêtres et descendants. À ce stade, l'utilisation de provide/inject devient nécessaire.

provide et inject ont été introduits dans Vue2.2.0 pour résoudre le problème du transfert de données entre les composants de plusieurs niveaux. Auparavant, si nous souhaitions transférer des données entre des composants parents et des composants enfants, nous l'implémentions généralement via des accessoires et des événements. Cependant, si nous avons besoin d'un transfert de données non réactif entre les composants ancêtres et les composants descendants, les accessoires et les événements ne conviennent pas pour le moment, nous devons utiliser provide et inject.

Maintenant, regardons un exemple :

<grand-parent>
    <parent>
        <child></child>
    </parent>
</grand-parent>

Dans cet exemple, grand-parent est le composant ancêtre, parent est le composant enfant et enfant est le composant descendant. Nous pouvons utiliser provide pour fournir certaines données chez le grand-parent, puis utiliser inject chez l'enfant pour accéder à ces données.

Tout d'abord, nous devons fournir des données en utilisant provide dans le composant grand-parent :

provide: {
    someData: '这是一些数据'
}

Ici, nous fournissons une donnée non réactive nommée someData.

Ensuite, utilisez inject dans le composant enfant pour accéder à ces données :

inject: ['someData'],

Ici, nous utilisons inject pour injecter des données someData, afin que nous puissions accéder à someData dans le composant enfant.

En plus des types de données simples, nous pouvons également utiliser provide pour fournir certaines fonctions et classes :

provide: {
    someMethod: this.doSomething,
    someClass: new MyClass()
}

Dans cet exemple, nous fournissons non seulement une méthode, mais également une instance de la classe. Dans les composants descendants, nous pouvons utiliser inject pour accéder à ces données :

inject: ['someMethod', 'someClass'],

Ici, nous utilisons inject pour injecter someMethod et someClass afin que nous puissions accéder à ces données dans les composants descendants.

Il convient de noter que puisque provide et inject ne répondent pas, les modifications de données ne seront pas écoutées. Si nous devons effectuer un transfert de données réactif, nous devons utiliser des accessoires et des événements.

Pour résumer, fournir et injecter sont des API très utiles dans Vue, qui peuvent nous aider à effectuer un transfert de données non réactif entre ancêtres et descendants. Provide et inject sont un bon choix lorsque nous devons transmettre des données non réactives.

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!