Analyse de cas d'utilisation de provide/inject dans vue

Cette fois, je vais vous apporter une analyse de cas d'utilisation de provide/inject in vue. Quelles sont les précautions lors de l'utilisation de provide/inject in vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

Avant-propos

Je regardais récemment le code source d'element-ui et j'ai trouvé un tel attribut:inject Ensuite, j'ai vérifié le fonctionnaire. website supplier/inject

provider/inject : pour faire simple, fournissez des variables via le fournisseur dans le composant parent, puis injectez les variables via inject dans le composant enfant.

Il convient de noter que quelle que soit la profondeur du sous-composant, tant que inject est appelé, les données du fournisseur peuvent être injectées. Au lieu de se limiter à obtenir des données uniquement à partir de l'attribut prop du composant parent actuel.

Vérifions notre conjecture :

d'abord : définissons un composant parent

<template>
 <p>
<childOne></childOne>
 </p>
</template>
<script>
 import childOne from '../components/test/ChildOne'
 export default {
  name: "Parent",
  provide: {
   for: "demo"
  },
  components:{
   childOne
  }
 }

Ici, nous prévoyons cela dans la variable du composant parent.

le deuxième définit un sous-composant

<template>
 <p>
  {{demo}}
  <childtwo></childtwo>
 </p>
</template>
<script>
 import childtwo from './ChildTwo'
 export default {
  name: "childOne",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  },
  components: {
   childtwo
  }
 }
</script>

le troisième définit un autre sous-composant

<template>
 <p>
  {{demo}}
 </p>
</template>
<script>
 export default {
  name: "",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  }
 }
</script>

Dans les 2 sous-composants nous utilisons jnject pour injecter la variable fournie par provide , et fournit à l'attribut data.

Le site officiel indique ici que les exemples ne fonctionnent qu'avec Vue 2.2.1 ou supérieur. En dessous de cette version, la valeur injectée sera obtenue après l'initialisation des accessoires et des données.

Vérifiez les résultats après l'avoir exécuté

Comme le montre l'exemple ci-dessus, tant qu'il est appelé dans le composant parent, il sera prendre effet dans le composant parentDans le cycle de vie, tous les composants enfants peuvent appeler inject pour injecter la valeur dans le composant parent.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour ajouter, supprimer et modifier des éléments JavaScript DOM

Vue utilise vee -valider pour vérifier le formulaire en détail

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!