Comment transmettre une valeur du contexte dans vue

L'API Contexte permet de transmettre des données entre composants en définissant un composant fournisseur pour fournir les données, puis d'y accéder dans les composants descendants à l'aide de la fonction inject(). Les étapes spécifiques comprennent : la définition du composant fournisseur à l'aide de la fonction provide() dans le composant fournisseur. Utilisez la fonction inject() pour injecter des valeurs dans les composants qui doivent accéder aux données partagées. Accédez à la valeur injectée.

Transmission de valeurs à l'aide de Context dans Vue

Context est une API de l'écosystème Vue.js qui permet de transmettre des données entre les composants de l'arborescence des composants. Pour ce faire, il définit une valeur dans le composant fournisseur, puis accède à cette valeur via l'API d'injection dans les composants descendants.

Comment transmettre des valeurs à l'aide du contexte

Création d'un composant fournisseur

Utilisez la fonction provide() pour définir un composant fournisseur. Ce composant fournira les données qui doivent être partagées.

import { provide } from 'vue';

export default {
  setup() {
    provide('myValue', 'Hello World!');
  }
}

Injecter des valeurs

Dans les composants qui doivent accéder à des données partagées, utilisez la fonction inject() pour injecter des valeurs.

import { inject } from 'vue';

export default {
  setup() {
    const myValue = inject('myValue');
    return { myValue };
  }
}

Accès aux valeurs injectées

Les valeurs injectées sont désormais accessibles dans le modèle ou le script d'un composant.

<template>
  <h1>{{ myValue }}</h1>
</template>

Exemple

Considérons une arborescence de composants avec des composants parents et enfants. Le composant parent fournit une valeur « myValue » à laquelle le composant enfant doit accéder.

Composant parent (Provider.vue)

<script>
import { provide } from 'vue';

export default {
  setup() {
    provide('myValue', 'Hello World!');
  }
}
</script>

Composant enfant (Consumer.vue)

<script>
import { inject } from 'vue';

export default {
  setup() {
    const myValue = inject('myValue');
    return { myValue };
  }
</script>

Result

Lors du rendu de Consumer.vue, il accédera à la valeur 'myValue' fournie par le composant parent et affichez-le dans l'interface utilisateur.

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!