Erreur Vue : Impossible d'utiliser correctement provide et inject pour l'injection de dépendances, comment le résoudre ?

Erreur Vue : Impossible d'utiliser correctement provide et inject pour l'injection de dépendances, comment le résoudre ?

Pendant le processus de développement de Vue, nous avons souvent besoin de partager des données ou des méthodes entre composants. Vue propose plusieurs façons d'implémenter la communication entre composants, dont l'une est l'injection de dépendances via provide et inject. Cependant, lors de l'utilisation de provide et inject pour l'injection de dépendances, nous rencontrons parfois des erreurs. Cet article abordera les solutions à ces problèmes.

1. Message d'erreur

Lorsque nous utilisons provide dans le composant pour fournir des données, puis que nous utilisons inject dans le sous-composant pour les recevoir, le message d'erreur suivant apparaît parfois :

[Vue warn]: The inject key "xxx" is already provided in xxx

Ce message d'erreur signifie que vous êtes dans le même composant, le même nom de clé est fourni plusieurs fois.

2. Solution

Lorsque nous rencontrons le message d'erreur ci-dessus, nous pouvons le résoudre à l'aide des deux méthodes suivantes :

Méthode 1 : Vérifiez l'emplacement de provide

Tout d'abord, nous devons confirmer si l'emplacement de provide est correct . Le fournisseur de données fourni doit être un composant parent et ne peut être utilisé que dans les composants ancêtres. Si l'emplacement de provide est incorrect, par exemple en utilisant provide pour fournir des données dans un composant enfant ou un composant frère, une erreur sera signalée.

Méthode 2 : évitez de fournir le même nom de clé à plusieurs reprises

Dans le même composant, le même nom de clé ne peut pas être fourni plusieurs fois. Lorsque nous rencontrons le message d'erreur ci-dessus, nous pouvons le résoudre des deux manières suivantes :

2.1 Utiliser différents noms de clé

Vous pouvez utiliser différents noms de clé pour fournir des données dans le composant qui fournit des données. Par exemple, voici un composant qui fournit des données :

// 提供数据的组件
export default {
  provide() {
    return {
      foo: 'bar'
    }
  },
  // ...
}

Dans le composant qui reçoit des données, différents noms de clés sont utilisés pour recevoir :

// 接收数据的组件
export default {
  inject: {
    baz: { from: 'foo' }
  },
  // ...
}

Grâce à la méthode ci-dessus, nous évitons d'utiliser le même nom de clé dans le même composant Question fourni à plusieurs reprises.

2.2 Utiliser des composants fonctionnels

Les composants fonctionnels de Vue fournissent un moyen concis d'implémenter l'injection de dépendances, évitant ainsi le problème de fournir à plusieurs reprises le même nom de clé. Dans les composants fonctionnels, vous pouvez utiliser directement provide et inject pour l'injection de dépendances sans vous soucier de fournir à plusieurs reprises des noms de clés. Voici un exemple d'utilisation de composants fonctionnels pour implémenter l'injection de dépendances :

// 函数式组件
export default Vue.extend({
  functional: true,
  provide() {
    return {
      foo: 'bar'
    }
  },
  inject: ['foo'],
  // ...
})

Avec la méthode ci-dessus, nous résolvons le problème de la fourniture répétée de noms de clés lors de l'utilisation de provide et inject pour l'injection de dépendances.

Résumé :

Dans Vue, l'injection de dépendances à l'aide de provide et inject est un moyen très pratique de communication entre composants. Cependant, lors de l’utilisation, nous rencontrons parfois des messages d’erreur. Cet article utilise deux méthodes, à savoir vérifier l'emplacement de provide et éviter de fournir à plusieurs reprises le même nom de clé, pour résoudre ces messages d'erreur. J'espère que cet article pourra vous aider à résoudre les problèmes liés à l'utilisation de provide et d'inject pour l'injection de dépendances.

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!