Props vom übergeordneten Element übergeben
Übergeben Sie im Template des übergeordneten Elements Werte an die Props untergeordneter Komponenten.
Props vom übergeordneten Element übergeben ist eine kostenlose Sveltejs 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 Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Die untergeordnete Komponente importieren
Verwenden Sie oben in der übergeordneten Komponente einen standardmäßigen ES-import, um die untergeordnete Komponente einzubinden.
<script>
import Greeting from "./Greeting.svelte";
</script>Das Tag verwenden
Rendern Sie die untergeordnete Komponente, indem Sie ein Tag mit ihrem großgeschriebenen Namen schreiben.
<Greeting />Statische Werte übergeben
Übergeben Sie ein Literal vom Typ String mit Attributen in Anführungszeichen.
<Greeting name="Ada" />Dynamische Werte übergeben
Übergeben Sie einen JS-Ausdruck, indem Sie den Wert in geschweifte Klammern einschließen.
<Greeting name={userName} />Kurzschreibweise bei gleichem Namen
Wenn Prop und Variable denselben Namen haben, verwenden Sie die Kurzschreibweise {name}.
<Greeting {name} />Mehrere Props
Kombinieren Sie statische, dynamische und verkürzte Props in beliebiger Reihenfolge.
<Card title="Tasks" {items} count={items.length} />Props per Spread übergeben
Übergeben Sie ein Objekt mit Props mithilfe der Syntax {...obj}.
<Card {...cardProps} />Bedingte Props
Kombinieren Sie ternäre Ausdrücke, um bedingte Werte bereitzustellen.
<Button label={isLoading ? "Saving..." : "Save"} />Kurzschreibweise für boolesche Props
Übergeben Sie ein boolesches Attribut ohne Wert, um es auf true zu setzen.
<Toggle disabled />Funktionen als Props
Sie können Funktionsreferenzen als Props für Callbacks übergeben.
<Modal onClose={() => (open = false)} />Objekt-Props
Übergeben Sie ganze Objekte, wenn viele zusammengehörige Werte gemeinsam übertragen werden.
<UserCard user={currentUser} />Kurze Überprüfung
Wie übergeben Sie eine Variable als Prop?
Zusammenfassung
Importieren Sie die Komponente, verwenden Sie das Tag und übergeben Sie Props als Literale, Ausdrücke, Kurzschreibweisen oder per Spread.
Häufig gestellte Fragen
Ist die Lektion „Props vom übergeordneten Element übergeben“ kostenlos?
Ja — der vollständige Text von „Props vom übergeordneten Element übergeben“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Props vom übergeordneten Element übergeben“?
Übergeben Sie im Template des übergeordneten Elements Werte an die Props untergeordneter Komponenten. Du übst Sveltejs 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 Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs 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 „Props vom übergeordneten Element übergeben“?
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 Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs 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
- Props mit export let deklarieren
- Props vom übergeordneten Element übergeben
- Standardwerte für Props
- Props mit $$props und $$restProps weiterleiten