Zusammenfassung

In dieser Lektion hast du gelernt:

• Eine Komponente kann in ihrer Vorlage eine Stelle für Inhalt von ihrem Elternteil lassen: <slot />. Der Elternteil setzt den Inhalt zwischen die Tags der Komponente, und Vue zeigt ihn anstelle des Slots. Eine Komponente ohne Slot lässt den Inhalt weg, ohne Warnung.
• Der Inhalt eines Slots gehört dem Elternteil: Er verwendet die Refs, berechneten Werte und Funktionen des Elternteils und dessen Stile. Er kann die Props oder Variablen der Komponente nicht sehen, und das <style scoped> der Komponente gestaltet ihn nicht.
• Was zwischen <slot> und </slot> steht, ist Fallback-Inhalt. Er wird gezeigt, wenn der Elternteil dem Slot keinen Inhalt gibt oder Inhalt, der nichts anzeigt, etwa ein Element, dessen v-if falsch ist.
• Eine Komponente kann mehrere Slots mit Namen haben: <slot name="fuss" />. Der Elternteil füllt sie mit <template #fuss>, wobei #fuss die Kurzform von v-slot:fuss ist. Inhalt außerhalb eines solchen <template> kommt in den Default-Slot, den ohne Namen.
• Daten und kurze Texte gehören in Props, Teile der Seite in Slots. Komponenten, die der Seite ihre Gestalt geben, etwa ein Panel, eine Karte oder ein Dialog, haben Slots, damit du sie mit beliebigem Inhalt wiederverwenden kannst.

In der nächsten Lektion, Checkpoint: Fotogalerie, verbindest du Komponenten, Props, Ereignisse und Slots in einer Galerie mit Fotos von einer Reise.

Aber zuerst ein bisschen Übung: ein Kasten für die Tipps des Cafés, Hinweis.vue. Sein Stil ist fertig, die Vorlage schreibst du selbst.