Fonction inject() de Vue3

Vue3 选项式 APIVue3 API des options

inject()La fonction inject() est une API fournie par Vue3, utilisée dans les composants enfants pour obtenir les dépendances fournies par les composants parents ou ancêtres viaprovide()la fonction provide(). Elle est principalement utilisée pour le transfert de données entre composants de niveaux différents, en particulier lorsque l'arbre de composants est profond.

Syntaxe de base

Exemple

import { inject } from 'vue';

const value = inject(key, defaultValue);
  • key: Une chaîne ou un Symbol représentant l'identifiant unique de la dépendance à injecter.
  • defaultValue: paramètre optionnel. Si la dépendance correspondante n'est pas trouvée, la valeur par défaut est renvoyée.

Cas d'utilisation

inject()Généralement utilisé avecprovide()et convient aux scénarios suivants :

  1. Communication entre composants de différents niveaux: lorsque la hiérarchie des composants est profonde, grâce àprovide()etinject()il permet d'éviter la corvée de passer les props couche par couche.
  2. Gestion de l'état global: dans les petites applications, vous pouvez utiliserprovide()etinject()pour remplacer des outils de gestion d'état tels que Vuex.
  3. Développement de plugins: lors de la fourniture de fonctionnalités ou de configurations globales dans des plugins,inject()c'est un outil pratique.

Exemples de code

Le composant parent utilise provide() pour fournir des données

Exemple

import { provide, ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue3!');
    provide('message', message); // Fournir des données
  }
};

Le composant enfant utilise inject() pour obtenir des données

Exemple

import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message', 'Default Message'); // Injecter des données
    return { message };
  }
};

Notes

  1. Réactivité des dépendances: Si les données fournies viaprovide()sont réactives (par exemple,refoureactive), puis dans les composants enfants, en utilisantinject()pour obtenir les données resteront également réactives.
  2. Rôle des valeurs par défaut: Si la dépendance correspondante n'est pas trouvée,inject()la valeur par défaut sera renvoyée. Il est recommandé de toujours définir une valeur par défaut pour éviter les erreurs d'exécution.
  3. Éviter l'utilisation excessive: Bien queprovide()etinject()est très pratique, une utilisation excessive peut entraîner un couplage accru entre les composants. Il est recommandé de ne l'utiliser que lorsque c'est nécessaire.

Vue3 选项式 APIVue3 API des options

Autres extensions