Benannte Slots

Das Panel hat eine einzige Stelle für Inhalt. Die Speisekarte braucht Karten mit drei Stellen: oben eine Überschrift, in der Mitte den Preis und unten einen Button, jedes in einem eigenen Teil der Karte, mit Linien dazwischen. Eine Komponente kann mehrere Slots haben, wenn du ihnen Namen gibst. Hier ist MenueKarte.vue:

<template>
    <article class="karte">
        <header>
            <slot name="kopf" />
        </header>
        <div class="inhalt">
            <slot />
        </div>
        <footer>
            <slot name="fuss" />
        </footer>
    </article>
</template>

Ein <slot> ohne Namen ist der Default-Slot. Der Elternteil füllt einen benannten Slot mit einem <template>, das # und den Namen des Slots hat:

<MenueKarte>
    <template #kopf>
        <h2>Karottenkuchen</h2>
    </template>
    <p>4 €</p>
    <template #fuss>
        <button>Hinzufügen</button>
    </template>
</MenueKarte>

Die <template>-Elemente selbst sind nicht auf der Seite, nur ihr Inhalt: Die Überschrift kommt in den header der Karte und der Button in ihren footer. Der Absatz steht in keinem <template #…>, also kommt er in den Default-Slot. Die Reihenfolge im Elternteil spielt keine Rolle: Die Vorlage der Karte bestimmt, wohin jeder Teil kommt.

#kopf ist die Kurzform von v-slot:kopf, wie @click die Kurzform von v-on:click ist. Du wirst beide in anderem Code sehen; dieser Kurs verwendet #. Und der Default-Slot heißt default, sein Inhalt kann also auch in einem <template #default> stehen.

Warum ein Slot für die Überschrift, wo das Panel doch eine Prop titel hatte? Für einen kurzen Text genügt eine Prop. Hier hat die Überschrift neben dem Namen auch ein Label mit der Kategorie, und eine andere Karte könnte dort ein Bild haben. Eine Faustregel: Daten und kurze Texte gehören in Props, Teile der Seite in Slots. Eine Komponente kann beides haben, wie das Panel.

Typische Fehler:

• Inhalt für einen benannten Slot, der nicht in einem <template #…> steht. Er kommt in den Default-Slot und erscheint also in der Mitte der Karte.
• Ein anderer Name in der Karte und im Elternteil, etwa <slot name="fuss" /> und <template #fusszeile>. Ein benannter Slot, den nichts füllt, bleibt leer, und Inhalt für einen Slot, den die Karte nicht hat, wird nicht gezeigt, beides ohne Warnung.
• # bei einem anderen Element als <template>, etwa <button #fuss>. Das ist ein Fehler in der Datei, und die rote Leiste unter der Vorschau sagt, wo er ist, und v-slot can only be used on components or <template> tags.