Vue Academy · Lektion

provide() in übergeordneten Komponenten

Primitive Werte, reaktive Refs und Objekte bereitstellen — Reaktivität über provide erhalten.

provide() in übergeordneten Komponenten ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Die Funktion provide

Mit Vue provide kann eine Komponente Daten allen ihren Nachfahren anbieten. Rufen Sie die Funktion in <script setup> mit einem Schlüssel und einem Wert auf.

import { provide } from "vue";
provide("message", "Hello from ancestor");

Jeder Nachfahr kann inject verwenden

Sobald ein Wert bereitgestellt wurde, kann jede Komponente an beliebiger Stelle darunter im Baum denselben Schlüssel mit inject anfordern – unabhängig davon, wie viele Ebenen dazwischenliegen. Die Zwischenkomponenten müssen dafür nichts tun.

App (provides "message")
  -> ... -> DeepChild (injects "message")

Reaktiven State bereitstellen

Damit Nachfahren reaktiv bleiben, stellen Sie ein ref oder ein reaktives Objekt statt eines einfachen Werts bereit. Änderungen am ref werden automatisch an alle Nutzer weitergegeben.

import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);

Reaktivität fließt nach unten

Wenn der Vorfahr theme.value ändert, wird jeder Nachfahr, der diesen Wert injiziert hat, mit dem neuen Wert erneut gerendert. Das ist der entscheidende Vorteil gegenüber der Weitergabe einer statischen Momentaufnahme.

function toggle() {
  theme.value = theme.value === "dark" ? "light" : "dark";
}

State mit readonly schützen

Standardmäßig könnte ein Nachfahr das injizierte ref verändern. Dadurch würden Zustandsänderungen verstreut und der unidirektionale Datenfluss unterbrochen. Verpacken Sie den Wert in readonly(), damit Nutzer ihn lesen, aber nicht ändern können.

import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));

Funktionen als Aktionen bereitstellen

Damit Nachfahren Änderungen anfordern können, stellen Sie zusammen mit dem schreibgeschützten State eine Funktion bereit. Die Nutzer rufen die Funktion auf; nur der Provider verändert die Quelle.

function updateName(name) {
  user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);

State und Aktionen bündeln

Ein sauberes Muster besteht darin, ein einzelnes Objekt mit dem schreibgeschützten State und seinen Aktionen bereitzustellen, ähnlich einem kleinen Store.

provide("userStore", {
  user: readonly(user),
  updateName
});

Provide auf Anwendungsebene

Sie können Werte auch auf Anwendungsebene bereitstellen, sodass sie jeder Komponente zur Verfügung stehen. Die Einrichtung erfolgt einmal auf der App-Instanz. (Dies wird später ausführlich behandelt.)

app.provide("appName", "CoddyKit");

Symbol-Schlüssel zur Vermeidung von Kollisionen

Schlüssel als Strings können in großen Apps zu Konflikten führen. Verwenden Sie ein Symbol aus einem gemeinsam genutzten Modul als Schlüssel, um seine Eindeutigkeit zu garantieren.

// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);

Wann Sie provide verwenden sollten

Provide eignet sich ideal für Theme, aktuellen Benutzer, i18n, Formular-Kontext oder Feature-Konfiguration – also für Werte, die in einem Teilbaum benötigt werden. Für eine oder zwei Ebenen sind einfache Props weiterhin die unkompliziertere Lösung.

Gültigkeitsbereich des Providers

Bereitgestellte Werte gelten innerhalb des Teilbaums der bereitstellenden Komponente. Zwei parallele Teilbäume können unter demselben Schlüssel unterschiedliche Werte bereitstellen, ohne sich gegenseitig zu beeinflussen.

Kurze Überprüfung

Wie verhindern Sie, dass Nachfahren bereitgestellten State verändern?

Zusammenfassung

Sie haben gelernt, dass provide(key, value) Daten für alle Nachfahren verfügbar macht. Stellen Sie ein ref bereit, damit die Reaktivität erhalten bleibt, verpacken Sie es mit readonly(), um Änderungen zu verhindern, stellen Sie Funktionen als Aktionen bereit und bevorzugen Sie Symbol-Schlüssel, um Kollisionen zu vermeiden.

Häufig gestellte Fragen

Ist die Lektion „provide() in übergeordneten Komponenten“ kostenlos?

Ja — der vollständige Text von „provide() in übergeordneten Komponenten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „provide() in übergeordneten Komponenten“?

Primitive Werte, reaktive Refs und Objekte bereitstellen — Reaktivität über provide erhalten. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „provide() in übergeordneten Komponenten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Vue Academy