Premiers pas avec VUE3 : utilisation de provide/inject pour partager entre les composants

VUE est un framework front-end moderne présentant les avantages d'une grande facilité d'utilisation, d'une grande flexibilité et d'excellentes performances. Il est de plus en plus populaire et privilégié par les développeurs front-end. La version VUE3 apporte de meilleures performances, une meilleure conception architecturale et est plus conviviale. VUE3 fournit une nouvelle façon de partager des données entre composants : fournir/injecter. Cet article présentera en détail le processus d'utilisation et de mise en œuvre de provide/inject.

Overview

provide/inject est une méthode officiellement recommandée par VUE3 pour partager des données entre composants. Dans VUE2, nous implémentons souvent la communication de données entre les composants via props/$emit et Vuex. La plus grande caractéristique de provide/inject est qu'il implémente le partage de données de manière plus implicite, rendant le code plus lisible et maintenable.

Utilisation de provide/inject

L'utilisation de provide/inject est très simple, voici quelques exemples :

Le composant parent fournit des données

<template>
  <child-component />
</template>

<script>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    provide('message', 'Hello from parent')
  }
}
</script>

Dans le composant parent, nous fournissons un message nommé message via la méthode provide data et définissez sa valeur sur « Bonjour du parent ». Ensuite, nous pouvons utiliser inject dans le sous-composant pour obtenir ces données :

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

Dans le sous-composant, nous utilisons la méthode inject pour obtenir les données nommées message. À ce stade, nous pouvons utiliser ces données dans le modèle.

Le composant enfant fournit des données

<template>
  <child-component />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const message = ref('Hello from parent')
    return { message }
  },
  provide: {
    message: this.message
  }
}
</script>

Dans cet exemple, nous définissons une donnée réactive nommée message dans le composant parent et définissons sa valeur sur « Bonjour du parent ». Nous fournissons ensuite ces données au composant enfant via la méthode provide. Dans le composant enfant, nous obtenons le message via la méthode inject et l'utilisons dans le modèle :

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

Notez que les données du message que nous définissons ici sont réactives.

Le processus d'implémentation de provide/inject

L'implémentation de provide/inject repose sur le nouveau système de réponse de VUE3. Dans VUE3, provide/inject s'appuie sur provideParent / injectSetupRef pour fonctionner. La fonction provideParent est similaire à la méthode provide, recevant à la fois le nom de clé et la valeur d'une donnée, tandis que injectSetupRef est utilisée pour obtenir des données du composant parent. Le processus d'implémentation spécifique est le suivant :

// provide函数
export function provide(key, value) {
  const vm = getCurrentInstance();
  if (!vm) {
    console.warn(`provide() can only be used inside setup().`);
  } else {
    let provides  = vm.provides;
    const parent = vm.parent;
    if (provides === EMPTY_OBJ) provides = vm.provides = Object.create(parent.provides);
    provides[key] = value;
  }
}

// inject函数
export function inject(key, defaultValue) {
  const vm = getCurrentInstance();
  if (vm) {
    const provides = vm.parent.provides;
    if (key in provides) {
      return provides[key];
    } else if (arguments.length > 1) {
      return defaultValue;
    } else {
      console.warn(`injection "${String(key)}" not found.`);
    }
  } else {
    console.warn(`inject() can only be used inside setup() or functional components.`);
  }
}

Dans la fonction provide, nous obtenons l'instance actuelle via la fonction getCurrentInstance et stockons les données fournies sur l'objet Provides de l'instance actuelle. Si l'instance actuelle n'existe pas, cela signifie que la fonction provide n'est pas appelée dans la fonction setup et qu'un message d'avertissement est renvoyé.

Dans la fonction inject, nous obtenons également l'instance actuelle via la fonction getCurrentInstance, et obtenons la valeur correspondant à la clé à partir de l'objet Provides de son composant parent. Si la valeur correspondant à la clé n'existe pas, defaultValue est renvoyée. Si l'instance actuelle n'existe pas, cela signifie que la fonction inject n'a pas été appelée dans la fonction de configuration ou le composant fonctionnel, et un message d'avertissement sera renvoyé.

Résumé

Grâce à l'introduction de cet article, nous pouvons savoir que fournir/injecter est une excellente méthode pour partager des données entre les composants VUE3. Il implémente le partage de données de manière plus implicite, rendant le code plus lisible et maintenable. Lors de l'utilisation, veuillez noter que les données fournies sont réactives et peuvent être utilisées dans des composants imbriqués. Dans le même temps, il convient de noter que si les données que nous fournissons n'existent pas dans provide, les paramètres passés dans arguments[1] seront utilisés comme valeur par défaut. À ce stade, vous devez toujours faire attention au type. et la valeur des paramètres.

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!