Comment utiliser provide et inject pour la communication de composants inter-niveaux dans Vue ?

Comment utiliser provide et inject pour la communication de composants inter-niveaux dans Vue ?

Dans le développement de Vue, la communication des composants à plusieurs niveaux est une exigence courante. Vue fournit un moyen simple et efficace d'établir une communication entre composants à plusieurs niveaux, notamment via la fourniture et l'injection. Cet article expliquera comment utiliser provide et inject dans Vue pour réaliser une communication de composants à plusieurs niveaux et joindra des exemples de code correspondants.

Tout d’abord, nous devons comprendre les concepts de base de fournir et d’injecter.

provide et inject sont un moyen spécial dans Vue permettant aux composants parents de transmettre des données aux composants descendants. Fournissez des données en utilisant provide dans le composant parent, puis utilisez inject dans le composant descendant pour obtenir ces données. L'option

provide peut être un objet ou une fonction. La clé de l'objet sera utilisée comme nom de propriété lors de l'utilisation d'inject dans le composant descendant, et la valeur sera utilisée comme données à transmettre. Si l'option provide est une fonction, un objet peut être renvoyé à l'intérieur de la fonction et la valeur clé de cet objet sera utilisée comme données fournies aux composants descendants.

Dans les composants descendants, vous pouvez utiliser l'option inject pour injecter les données fournies par le composant parent. L'option inject peut être un tableau ou un objet. Si l'option inject est un tableau, les éléments du tableau seront utilisés comme noms d'attributs à obtenir. Si l'option inject est un objet, la clé de l'objet sera utilisée comme nom de propriété et la valeur sera la valeur par défaut fournie.

Ci-dessous, nous utilisons un exemple pour montrer comment utiliser provide et inject pour la communication de composants entre niveaux.

Dans le composant parent, nous fournissons une donnée appelée message que le composant descendant doit utiliser :

<template>
  <div>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  provide: {
    message: 'Hello, World!',
  },
};
</script>

Dans le composant enfant, nous utilisons l'option inject pour obtenir les données fournies par le composant parent et les utiliser dans le modèle :

<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'], // 这里使用数组形式注入要获取的数据
  computed: {
    injectedMessage() {
      return this.message;
    },
  },
};
</script>

Grâce au code ci-dessus, nous avons implémenté avec succès le composant parent pour transmettre les données au composant enfant, et obtenu et affiché les données dans le composant enfant.

En plus de l'option inject sous forme de tableau, nous pouvons également utiliser l'option inject sous forme d'objet pour communiquer entre les composants de niveau via provide et inject. Pour l'option injecter sous forme d'objet, la clé de chaque membre sera utilisée comme nom d'attribut et la valeur sera utilisée comme valeur par défaut de l'attribut.

<template>
  <div>
    <GrandChildComponent></GrandChildComponent>
  </div>
</template>

<script>
import GrandChildComponent from './GrandChildComponent.vue';

export default {
  components: {
    GrandChildComponent,
  },
  provide() {
    return {
      greeting: this.greetings, // 将父组件中的greetings数据提供给后代组件使用
    };
  },
  data() {
    return {
      greetings: 'Hello, World!', // 作为提供给后代组件的数据
    };
  },
};
</script>

Dans le composant petit-fils, nous utilisons l'option inject pour obtenir les données fournies par le composant parent et les utilisons dans le modèle :

<template>
  <div>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
export default {
  inject: {
    greeting: {
      default: 'Hi, there!', // 设置greeting的默认值
    },
  },
};
</script>

Avec le code ci-dessus, nous avons implémenté avec succès le composant parent pour transmettre les données au petit-fils composant et utilisez-le dans le composant petit-enfant. Les données sont obtenues et affichées dans le composant.

Résumé :

Grâce à la fourniture et à l'injection, nous pouvons facilement réaliser une communication entre composants à plusieurs niveaux. Le composant parent fournit des données via l'option provide et le composant descendant obtient les données via l'option inject. Nous pouvons injecter des données en utilisant l'option inject sous forme de tableau ou d'objet. Lorsque vous utilisez provide et inject pour la communication de composants entre niveaux, vous devez faire attention aux conflits de noms et éviter d'utiliser des données réactives lors de l'utilisation de provide.

J'espère que cet article pourra vous aider à comprendre comment utiliser provide et inject pour la communication de composants inter-niveaux dans Vue, et à l'appliquer au développement réel.

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!