Fallback-Inhalte von Slots und Slots prüfen
Standardinhalte von Slots, mit useSlots() prüfen, ob ein Slot bereitgestellt wurde, bedingtes Rendern.
Fallback-Inhalte von Slots und Slots prüfen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.
Fallback-Inhalt für Slots
Ein <slot> kann ein Standard-Markup enthalten. Wenn der Parent Inhalt für diesen Slot bereitstellt, hat der Inhalt des Parents Vorrang. Andernfalls wird der Fallback-Inhalt innerhalb des Slots gerendert.
Einen Fallback definieren
Platzieren Sie den Standardinhalt zwischen den Slot-Tags. Das ist ein sinnvoller Standardwert für optionale Slots.
<!-- Button.vue -->
<button>
<slot>Submit</slot>
</button>Fallback in Aktion
Wenn der Parent nichts übergibt, wird „Submit“ angezeigt. Wenn der Parent Inhalt übergibt, ersetzt dieser den Fallback.
<Button /> <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->Fallbacks für benannte Slots
Auch benannte Slots unterstützen Fallbacks. Ein Header-Slot kann standardmäßig einen festgelegten Titel anzeigen, wenn der Parent ihn nicht bereitstellt.
<header>
<slot name="header">
<h2>Default Title</h2>
</slot>
</header>Das Problem leerer Wrapper
Manchmal soll ein Wrapper-Element, etwa ein Footer-Container, nur dann gerendert werden, wenn der Parent tatsächlich Slot-Inhalt bereitstellt. Dafür müssen Sie prüfen, ob ein Slot vorhanden ist.
Das Composable useSlots
In <script setup> gibt useSlots() ein Objekt zurück, dessen Schlüssel die bereitgestellten Slot-Namen sind. Jeder Wert ist eine Funktion, die die Slot-VNodes zurückgibt.
import { useSlots } from "vue";
const slots = useSlots();Prüfen, ob ein Slot übergeben wurde
Rufen Sie die Slot-Funktion auf und prüfen Sie, ob sie einen truthy Inhalt zurückgibt. slots.header ist nur vorhanden, wenn der Parent diesen Slot bereitgestellt hat. Der Aufruf slots.header?.() gibt sicher dessen VNodes zurück.
const hasHeader = computed(() => !!slots.header);Den Wrapper bedingt rendern
Verwenden Sie die Prüfung mit v-if, damit das Wrapper-Element nur bei vorhandenem Inhalt erscheint. So vermeiden Sie leere DOM-Knoten.
<header v-if="slots.header">
<slot name="header" />
</header>Warum optionales Chaining
slots.header?.() verhindert einen Fehler, falls der Slot nicht definiert ist. Ohne optionales Chaining führt der Aufruf eines undefinierten Slots zu einem Fehler. Dieses Muster ist in Render-Funktionen und berechneten Prüfungen weit verbreitet.
const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }$slots im Template
Templates stellen dieselben Daten über $slots bereit. Sie können $slots.footer direkt in einem v-if prüfen, ohne useSlots zu importieren.
<footer v-if="$slots.footer">
<slot name="footer" />
</footer>Alles zusammenführen
Eine robuste Card-Komponente rendert jeden Abschnitt nur dann, wenn der entsprechende Slot bereitgestellt wurde. So bleiben Markup und Styles sauber und vorhersehbar.
<div class="card">
<header v-if="$slots.header"><slot name="header" /></header>
<div class="body"><slot /></div>
<footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>Kurze Überprüfung
Wie prüfen Sie in script setup, ob der Parent einen „header“-Slot bereitgestellt hat?
Zusammenfassung
Sie haben gelernt, dass Slots Fallback-Inhalt enthalten können, der gerendert wird, wenn der Parent den Slot nicht bereitstellt. Um Wrapper bedingt zu rendern, prüfen Sie das Vorhandensein eines Slots mit useSlots() (slots.header?.()) in script setup oder mit $slots.header in Templates.
Häufig gestellte Fragen
Ist die Lektion „Fallback-Inhalte von Slots und Slots prüfen“ kostenlos?
Ja — der vollständige Text von „Fallback-Inhalte von Slots und Slots prüfen“ 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 „Fallback-Inhalte von Slots und Slots prüfen“?
Standardinhalte von Slots, mit useSlots() prüfen, ob ein Slot bereitgestellt wurde, bedingtes Rendern. 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 4 von 4.
Wie lange dauert die Lektion „Fallback-Inhalte von Slots und Slots prüfen“?
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