En savoir plus sur fournir/injecter dans vue

Cet article partage avec vous l'apprentissage de provide/inject in vue, dans l'espoir d'aider des amis dans le besoin

Avant-propos

En regardant récemment le code source d'element-ui, j'ai trouvé tel un attribut : inject. Ensuite, j'ai vérifié le site officiel supplier/inject

provider/inject : en termes simples, la variable est fournie via le fournisseur dans le composant parent, puis injectée via inject dans la variable 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éfinir un composant parent

<template>
  <p>
<childOne></childOne>
  </p>
</template>

<script>
  import childOne from &#39;../components/test/ChildOne&#39;
  export default {
    name: "Parent",
    provide: {
      for: "demo"
    },
    components:{
      childOne
    }
  }

Nous voici prévoyons cela variable dans le composant parent.

• la deuxième définit un sous-composant

<template>
  <p>
    {{demo}}
    <childtwo></childtwo>
  </p>
</template>

<script>
  import childtwo from &#39;./ChildTwo&#39;
  export default {
    name: "childOne",
    inject: [&#39;for&#39;],
    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: [&#39;for&#39;],
    data() {
      return {
        demo: this.for
      }
    }
  }
</script>

Dans les deux sous-composants, nous utilisons jnject pour injecter la variable fournie par provide et la fournir à 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, puis dans Au cours du cycle de vie de ce composant parent, tous les composants enfants peuvent appeler inject pour injecter la valeur dans le composant parent.

Recommandations associées :

vue 2 Utilisation de Bus.js pour implémenter la communication entre composants non parent-enfant

Exemple de chat basé sur vue .js et webpack

Bonnes pratiques Vue.js (cinq conseils pour faire de vous un maître de Vue.js)

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!