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.

<code class="javascript">import { provide } from 'vue';

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

Injecter des valeurs

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

<code class="javascript">import { inject } from 'vue';

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

Accès aux valeurs injectées

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

<code class="html"><template>
  <h1>{{ myValue }}</h1>
</template></code>

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)

<code class="javascript"><script>
import { provide } from 'vue';

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

Composant enfant (Consumer.vue)

<code class="javascript"><script>
import { inject } from 'vue';

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

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!