So übergeben Sie Werte aus dem Kontext in Vue

Die Kontext-API ermöglicht die komponentenübergreifende Weitergabe von Daten, indem eine Anbieterkomponente definiert wird, die die Daten bereitstellt, und dann mithilfe der Funktion inject() in untergeordneten Komponenten darauf zugreift. Zu den spezifischen Schritten gehören: Definieren der Anbieterkomponente mithilfe der Funktion „prove()“ in der Anbieterkomponente. Verwenden Sie die Funktion inject(), um Werte in Komponenten einzufügen, die auf gemeinsam genutzte Daten zugreifen müssen. Greifen Sie auf den injizierten Wert zu.

Übergabe von Werten mithilfe von Context in Vue

Context ist eine API im Vue.js-Ökosystem, die die Übergabe von Daten über Komponenten im Komponentenbaum hinweg ermöglicht. Dies geschieht durch die Definition eines Werts in der Anbieterkomponente und den anschließenden Zugriff auf diesen Wert über die Inject-API in den Nachkommenkomponenten.

So übergeben Sie Werte mithilfe des Kontexts

Erstellen einer Anbieterkomponente

Verwenden Sie die Funktion „prove()“, um eine Anbieterkomponente zu definieren. Diese Komponente stellt die Daten bereit, die geteilt werden müssen.

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

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

Werte einfügen

In Komponenten, die auf gemeinsam genutzte Daten zugreifen müssen, verwenden Sie die Funktion inject(), um Werte einzufügen.

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

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

Zugriff auf injizierte Werte

Auf injizierte Werte kann jetzt in der Vorlage oder im Skript einer Komponente zugegriffen werden.

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

Beispiel

Betrachten Sie einen Komponentenbaum mit übergeordneten und untergeordneten Komponenten. Die übergeordnete Komponente stellt einen Wert „myValue“ bereit, auf den die untergeordnete Komponente zugreifen muss.

Übergeordnete Komponente (Provider.vue)

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

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

Untergeordnete Komponente (Consumer.vue)

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

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

Ergebnis

Wenn Consumer.vue rendert, greift es auf den von der übergeordneten Komponente bereitgestellten Wert „myValue“ zu und zeigen Sie es in der Benutzeroberfläche an.

Das obige ist der detaillierte Inhalt vonSo übergeben Sie Werte aus dem Kontext in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!