Scoped Slots: Daten an die übergeordnete Komponente übergeben
slot :data='value', v-slot='{ data }' auf der übergeordneten Seite, Render-Prop-Muster.
Scoped Slots: Daten an die übergeordnete Komponente übergeben 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 Einschränkung einfacher Slots
Einfache Slots ermöglichen es einem Parent, Markup weiterzugeben, aber der Parent kann nicht auf die internen Daten des Childs zugreifen. Scoped Slots lösen dieses Problem, indem das Child Daten an den Slot-Inhalt zurückgeben kann.
Daten an einen Slot binden
Das Child bindet Attribute an sein <slot>-Element. Diese Attribute werden Slot-Props genannt und an alles übergeben, was der Parent rendert.
<!-- List.vue -->
<ul>
<li v-for="(item, i) in items" :key="item.id">
<slot :item="item" :index="i"></slot>
</li>
</ul>Slot-Props empfangen
Im Parent wird der Wert von v-slot zu einem Objekt, das alle vom Child gebundenen Slot-Props enthält.
<List :items="users">
<template v-slot:default="slotProps">
{{ slotProps.index }}: {{ slotProps.item.name }}
</template>
</List>Slot-Props destrukturieren
Da der Slot-Wert lediglich ein Objekt ist, können Sie ihn für übersichtlicheren Code direkt inline destrukturieren.
<List :items="users">
<template v-slot:default="{ item, index }">
{{ index }}: {{ item.name }}
</template>
</List>Kurzschreibweise für den Default-Scoped-Slot
Wenn Sie nur den Default-Slot verwenden, können Sie v-slot direkt am Komponententag statt an einem verschachtelten Template angeben.
<List :items="users" v-slot="{ item }">
{{ item.name }}
</List>Umbenennungen und Standardwerte
Die Destrukturierung unterstützt ebenso wie normales JavaScript Umbenennungen und Standardwerte.
<template v-slot:default="{ item: user, index = 0 }">
{{ index }} - {{ user.name }}
</template>Named Scoped Slots
Auch Named Slots können einen Scope haben. Kombinieren Sie den Namen mit den destrukturierten Props.
<DataTable :rows="rows">
<template #cell="{ value, column }">
<strong>{{ column }}: {{ value }}</strong>
</template>
</DataTable>Renderless-Komponenten
Scoped Slots ermöglichen das Muster der Renderless-Komponente: Eine Komponente verarbeitet Logik und Zustand, rendert aber kein eigenes Markup. Stattdessen stellt sie Daten über einen Scoped Slot bereit und überlässt dem Parent die Entscheidung über die Benutzeroberfläche.
Ein Renderless Mouse Tracker
Die Komponente verfolgt den Cursor und stellt Koordinaten bereit. Sie rendert nur ihren Default-Slot und übergibt x und y.
<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>Eine Renderless-Komponente verwenden
Der Parent stellt die gesamte Darstellung bereit und liest die zur Verfügung gestellten Daten aus. Dadurch werden Logik und Präsentation vollständig voneinander entkoppelt.
<Mouse v-slot="{ x, y }">
<p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>Scoped Slots und Composables
In Vue 3 ersetzen Composables Renderless-Komponenten häufig, wenn es nur um die Wiederverwendung von Logik geht. Scoped Slots sind jedoch weiterhin die bessere Wahl, wenn das Child die Iteration oder Struktur steuern muss, etwa bei einer Liste oder Tabelle, während der Parent jedes Element individuell gestaltet.
Kurzer Test
Wie erhält ein Parent Daten, die von einem Scoped Slot bereitgestellt werden?
Zusammenfassung
Sie haben gelernt, dass Scoped Slots einem Child ermöglichen, Daten nach oben weiterzugeben, indem es Props an seinen <slot> bindet. Der Parent liest sie über den v-slot-Wert aus, der häufig destrukturiert wird. So lassen sich Renderless-Komponenten erstellen, die Logik und Präsentation voneinander trennen.
Häufig gestellte Fragen
Ist die Lektion „Scoped Slots: Daten an die übergeordnete Komponente übergeben“ kostenlos?
Ja — der vollständige Text von „Scoped Slots: Daten an die übergeordnete Komponente ü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 Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Scoped Slots: Daten an die übergeordnete Komponente übergeben“?
slot :data='value', v-slot='{ data }' auf der übergeordneten Seite, Render-Prop-Muster. 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 „Scoped Slots: Daten an die übergeordnete Komponente ü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 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
- Benannte Slots und Default-Slot
- Scoped Slots: Daten an die übergeordnete Komponente übergeben
- Dynamische Slot-Namen
- Fallback-Inhalte von Slots und Slots prüfen