Fallback-Inhalt

Eine leere Bestellung zeigt nur Gesamt: 0 € und einen Button, der nichts zu leeren hat. Eine kurze Nachricht wäre freundlicher, und das Panel kann sie selbst mitbringen. Was du zwischen <slot> und </slot> schreibst, ist der Fallback-Inhalt des Slots: Er wird gezeigt, wenn der Elternteil dem Slot keinen Inhalt gibt.

<template>
    <section class="panel">
        <h2>{{ titel }}</h2>
        <slot>
            <p>Hier ist noch nichts.</p>
        </slot>
    </section>
</template>

<Panel titel="Neuigkeiten" />
<Panel titel="Öffnungszeiten">
    <p>Jeden Tag von 7 bis 19 Uhr.</p>
</Panel>

Das Panel Neuigkeiten hat keinen Inhalt, also zeigt es Hier ist noch nichts. Das Panel mit den Öffnungszeiten zeigt seinen Absatz, und sein Fallback-Inhalt ist gar nicht auf der Seite.

Inhalt, der nichts anzeigt, zählt als kein Inhalt. Hat alles zwischen den Tags ein v-if, dessen Bedingung falsch ist, ist der Slot leer, und der Fallback-Inhalt wird gezeigt. Mehrere Elemente können sich ein v-if in einem <template v-if> teilen, wie du es aus der Lektion Bedingungen und Listen kennst:

<Panel titel="Deine Bestellung">
    <template v-if="bestellung.length > 0">
        <ul>
            ...
        </ul>
        <p>Gesamt: {{ gesamt }} €</p>
    </template>
</Panel>

Solange die Bestellung leer ist, sagt das Panel Hier ist noch nichts. Sobald etwas darin ist, zeigt das Panel die Liste und die Summe.

Ein typischer Fehler: ein selbstschließendes <slot /> mit dem Text danach, als <slot /><p>Hier ist noch nichts.</p>. Der Absatz ist dann ein gewöhnlicher Teil des Panels und wird immer gezeigt, unter dem Inhalt.