Vue Academy · Lektion

Slots und Scoped Slots

Erstellen Sie flexible Komponenten mit Slots und Scoped Slots

Slots und Scoped Slots ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. 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 3 Lektionen.

Was sind Slots?

Slots ermöglichen es einer übergeordneten Komponente, Inhalte in das Template einer untergeordneten Komponente einzufügen.

Props übergeben Daten, Slots übergeben Markup
Besonders geeignet für Layout-Wrapper, Karten und Modalfenster
Die untergeordnete Komponente entscheidet, wo der Inhalt eingefügt wird

Der Standard-Slot

Eine untergeordnete Komponente definiert mit dem Element slot einen Platzhalter. Alles, was die übergeordnete Komponente zwischen die Tags schreibt, füllt diesen Platzhalter.

<!-- Card.vue (child) -->
<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

Den Standard-Slot verwenden

Die übergeordnete Komponente übergibt Inhalte zwischen den Komponenten-Tags.

<!-- Parent -->
<Card>
  <h2>Title</h2>
  <p>Any content goes here.</p>
</Card>

<!-- It renders inside the card div -->

Fallback-Inhalt eines Slots

Ein Slot kann Fallback-Inhalt bereitstellen, der angezeigt wird, wenn die übergeordnete Komponente nichts übergibt.

<!-- Button.vue -->
<template>
  <button>
    <slot>Click me</slot>
  </button>
</template>

<!-- <Button /> shows "Click me";
     <Button>Save</Button> shows "Save" -->

Mehrere benannte Slots

Benannte Slots ermöglichen es einer Komponente, mehrere Einfügepunkte bereitzustellen.

<!-- Layout.vue -->
<template>
  <header><slot name="header"></slot></header>
  <main><slot></slot></main>
  <footer><slot name="footer"></slot></footer>
</template>

Benannte Slots befüllen

Die übergeordnete Komponente wählt einen benannten Slot mit v-slot:name an einem Template-Tag aus.

<Layout>
  <template v-slot:header>
    <h1>Site Title</h1>
  </template>

  <p>Main content (default slot)</p>

  <template v-slot:footer>
    <small>Copyright 2024</small>
  </template>
</Layout>

Kurzschreibweise für v-slot

v-slot besitzt eine Kurzschreibweise: das Symbol #.

<Layout>
  <template #header>
    <h1>Title</h1>
  </template>

  <template #footer>
    <small>Footer</small>
  </template>
</Layout>

Scoped Slots

Scoped Slots ermöglichen es der untergeordneten Komponente, Daten an den Slot-Inhalt zu übergeben.

Die untergeordnete Komponente bindet Daten am Slot-Element
Die übergeordnete Komponente empfängt sie als Slot-Props
Nützlich, wenn die untergeordnete Komponente die Daten, die übergeordnete Komponente aber das Erscheinungsbild steuert

Daten aus einer untergeordneten Komponente bereitstellen

Die untergeordnete Komponente bindet Attribute am Slot, um Daten weiterzugeben.

<!-- UserList.vue -->
<template>
  <li v-for="user in users" :key="user.id">
    <slot :user="user"></slot>
  </li>
</template>

Scoped-Slot-Daten verwenden

Die übergeordnete Komponente empfängt die Daten über v-slot.

<UserList>
  <template #default="slotProps">
    {{ slotProps.user.name }}
  </template>
</UserList>

<!-- or destructure: #default="{ user }" -->

Wann welcher Slot verwendet wird

Kurzübersicht:

Standard-Slot für das einfache Einfügen von Inhalten
Benannte Slots für mehrere Bereiche (Layout)
Scoped Slots, wenn die übergeordnete Komponente interne Daten der untergeordneten Komponente benötigt

Kurztest

Testen Sie Ihr Verständnis von Slots.

Zusammenfassung: Slots

Sie haben die Inhaltsverteilung mit Slots kennengelernt:

Der Standard-Slot fügt Markup der übergeordneten Komponente ein
Fallback-Inhalt wird angezeigt, wenn nichts übergeben wird
Benannte Slots (v-slot:name, Kurzschreibweise #) wählen bestimmte Bereiche aus
Scoped Slots übergeben Daten der untergeordneten Komponente an den Slot-Inhalt

Als Nächstes: Grundlagen der Reaktivität.

Häufig gestellte Fragen

Ist die Lektion „Slots und Scoped Slots“ kostenlos?

Ja — der vollständige Text von „Slots und Scoped Slots“ 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 3 Lektionen.

Was lerne ich in „Slots und Scoped Slots“?

Erstellen Sie flexible Komponenten mit Slots und Scoped Slots 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 3 von 3.

Wie lange dauert die Lektion „Slots und Scoped Slots“?

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