Fournir/injecter une fonction dans Vue3 : méthode de communication avancée des composants

Vue est un framework d'application JavaScript open source populaire qui est devenu l'une des technologies importantes pour le développement front-end. Utilisez la fonction provide/inject dans Vue pour implémenter des fonctions de communication avancées des composants. Cet article présentera brièvement les fonctions provide/inject dans Vue3 et leur application dans la communication de composants avancés.

fournir et injecter des fonctions dans Vue3

Vue3 est une nouvelle version de Vue.js qui fournit une variété de nouvelles fonctions et méthodes. De nouvelles fonctions provide et inject sont fournies pour remplacer les accessoires et les événements dans Vue2. Les fonctions provide et inject permettent à un composant ancêtre de transmettre des données à tous les composants descendants sans transmettre explicitement des données dans chaque composant. La fonction provide est définie dans le composant ancêtre et la fonction inject est appelée dans le composant descendant.

Utilisez la fonction provide

La fonction provide est utilisée pour définir les données dans les composants ancêtres. La fonction provide accepte un objet comme paramètre et ajoute des données sous forme de paires clé-valeur à l'objet. Dans l'exemple suivant, nous définissons une variable nommée « user » et l'ajoutons sous forme de paire clé-valeur à l'objet de la fonction provide :

<template>
  <div>
    <GrandparentComponent>
      <ParentComponent>
        <ChildComponent />
      </ParentComponent>
    </GrandparentComponent>
  </div>
</template>

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

export default {
  components: { GrandparentComponent },
  setup() {
    const user = { name: 'John', age: 25 }
    provide('user', user)
  }
}
</script>

Dans la fonction provide, nous utilisons la fonction provide pour fournir une clé « user » , correspondant à un objet contenant des informations utilisateur.

Utilisez la fonction inject

La fonction inject est utilisée pour obtenir des données dans les composants descendants. Dans l'exemple suivant, nous obtenons la valeur de la variable "user" fournie par la fonction provide dans la fonction de configuration du ChildComponent :

<template>
  <div>
    <h4>ChildComponent</h4>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const user = inject('user')
    console.log(user) // { name: 'John', age: 25 }
    return { user }
  }
}
</script>

Dans le ChildComponent, nous utilisons la fonction inject pour obtenir la valeur de la variable "user" et mettons il est stocké dans un utilisateur nommé constant. Dans le modèle, nous pouvons accéder directement aux propriétés de la variable utilisateur.

Avantages des fonctions de fourniture et d'injection

Dans la méthode traditionnelle des accessoires et des événements, les données doivent être transmises à chaque composant couche par couche. Dans les grandes applications, cela est très fastidieux et sujet aux erreurs. Cependant, en utilisant les fonctions provide et inject, nous pouvons transmettre des données plus facilement. Les fonctions provide et inject peuvent transmettre des données dans l'arborescence des composants, permettant ainsi aux données de circuler entre les composants.

Dans les fonctions provide et inject, les données sont transmises dans le sens inverse. Contrairement aux accessoires et aux événements, les données fournies par les fonctions provide et inject ne sont pas limitées aux composants descendants. Tout au long de l'arborescence des composants, les composants descendants peuvent facilement obtenir les données fournies. De plus, comme les fonctions provide et inject sont réactives, vous pouvez les utiliser avec de nombreuses autres fonctionnalités et API Vue3.

Conclusion

Cet article présente les fonctions provide et inject dans Vue3 et leur application dans la communication de composants avancés. En utilisant ces fonctions, vous pouvez facilement transmettre des données dans toute l'arborescence des composants. Merci d'avoir lu cet article, j'espère qu'il vous sera utile pour votre travail de développement de Vue.

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!