Comment utiliser provide/inject dans Vue pour transmettre des données à travers plusieurs couches d'ancêtres et de descendants

Vue fournit une méthode de transfert de données efficace - fournir/injecter, qui peut nous aider à transférer des données entre ancêtres et descendants sur plusieurs couches, évitant ainsi un transfert d'accessoires fastidieux. Cet article expliquera comment utiliser provide/inject dans Vue pour réaliser un transfert de données sur plusieurs couches d'ancêtres et de descendants.

1. Provide et inject

provide et inject sont de nouvelles API après la version Vue2.2.0, utilisées pour réaliser le transfert de données entre des composants multicouches. provide permet à un composant d'injecter une dépendance dans tous ses composants descendants, et inject peut recevoir cette dépendance et l'utiliser.

provide et inject sont principalement utilisés pour les bibliothèques de plug-ins/composants haut de gamme, telles que element-ui. Dans element-ui, ses composants dépendent tous d'une bibliothèque de composants de niveau supérieur. Cette bibliothèque de composants doit fournir des variables et des méthodes publiques à tous les sous-composants. Provide et inject sont utilisés pour transférer ces données.

2. L'utilisation de provide et inject

En utilisant provide dans un composant, nous pouvons fournir un point d'injection aux composants enfants afin qu'ils puissent obtenir les données fournies par le parent composant. Par exemple :

// 父组件
export default {
  provide () {
    return {
      theme: this.theme
    }
  },
  data () {
    return {
      theme: 'light'
    }
  }
}

// 子组件
export default {
  inject: ['theme'],
  mounted () {
    console.log(this.theme) // light
  }
}

Dans l'exemple ci-dessus, le composant parent utilise provide pour fournir des données et exposer l'objet de données aux composants descendants. Les données ici sont de type chaîne. La façon de fournir est d'utiliser la fonction provide Selon la documentation officielle de provide, la valeur de retour de cette fonction est un objet. La clé dans l'objet peut être utilisée lors de l'injection de descendants, et la valeur correspond aux données à injecter, qui peuvent être une variable, une fonction, etc.

En utilisant inject dans le composant enfant, nous pouvons recevoir les données fournies par le composant parent. Par exemple :

export default {
  inject: ['theme'],
  mounted () {
    console.log(this.theme) // light
  }
}

Dans l'exemple, le composant enfant reçoit des données en utilisant l'option inject dans les options du composant. "inject : [key]" où key est la clé de l'objet de données à exposer dans le composant parent. La clé ici est cohérente avec celle fournie par la fonction provide. Il convient de noter que par défaut, la dépendance sera recherchée dans le parent. Si vous ne souhaitez pas rechercher dans le parent, vous devez définir srcoll dans l'inject sur false. Seules les données fournies par le composant parent peuvent être injectées par le composant enfant.

3. Notes sur provide et inject

1. provide Les données injectées peuvent être utilisées dans les composants descendants, mais pas dans son composant parent.

Dans le mécanisme de provide et d'inject, les données fournies par provide peuvent être injectées dans les composants descendants par inject. Cependant, si inject est également utilisé dans le composant parent pour recevoir des données, cela ne prendra pas effet car inject recherchera par défaut les données fournies dans le composant parent, et Vue ne cherchera pas dans le composant parent pour être cohérent avec le descendant. composants.

2. N'utilisez pas de fonctions fléchées dans provide pour renvoyer des données.

provide doit renvoyer un objet pour fournir des données, nous utilisons donc souvent des fonctions fléchées pour renvoyer un objet, par exemple :

export default {
  provide: () => ({
    theme: 'light'
  })
}

Cependant, dans la plupart des cas Ensuite, nous ne devons pas utiliser les fonctions fléchées pour fournir des données, car les fonctions fléchées ne pointent pas vers cela. Lorsque vous utilisez des fonctions fléchées dans provide, le contexte n'est pas correct et il ne répond pas aux modifications des données.

3. Il n'est pas recommandé d'utiliser des noms commençant par le symbole $ dans provide et inject.

La dénomination à l'aide du symbole $ dans provide et inject est une règle de dénomination réservée par Vue, nous vous déconseillons donc d'utiliser le symbole $ pour démarrer les données fournies. L'utilisation de noms commençant par le symbole $ dans provide peut causer des problèmes, tandis que l'utilisation de noms commençant par le symbole $ dans inject sera ignorée.

4. Scénarios d'utilisation

L'objectif principal de provide/inject est de créer une bibliothèque de composants à travers le niveau des composants. Plus précisément, plusieurs composants partagent certaines des mêmes informations ou statuts, tels que la couleur du thème, la langue, etc.

Dans le processus de développement actuel, un scénario peut être facilement imaginé : dans une application ou une page, il peut y avoir de nombreux composants similaires, et ces composants doivent utiliser le même état ou la même méthode que nous pouvons utiliser. fournir/injecter pour transmettre ces informations et statuts partagés à travers les niveaux, en évitant le code redondant et la duplication du travail.

Dans le même temps, nous pouvons également utiliser des mixins pour éviter la duplication et la redondance du code, rendant notre code élégant, propre et facile à maintenir.

5. Résumé

L'utilisation de provide/inject est une méthode de transfert de données efficace qui peut nous aider à réaliser un transfert de données entre plusieurs couches d'ancêtres et de descendants et à réduire l'utilisation d'accessoires. Cependant, il convient de noter qu'il existe certaines précautions à suivre lors de l'utilisation de provide/inject pour éviter d'affecter les performances et l'exactitude du composant. Dans le même temps, l'application réelle nécessite une analyse détaillée des scénarios et une utilisation raisonnable de provide/inject, props ou vuex pour le transfert de données.

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!