Explication détaillée des étapes à suivre pour utiliser provide/inject dans vue

Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation de provide/inject dans Vue. Quelles sont les précautions lors de l'utilisation de provide/inject dans Vue. Voici des cas pratiques, 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é

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. vers d'autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Comment utiliser vue pour implémenter le mini-jeu 2048

Comment utiliser vee-validate dans 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!