Was sind Slots und Scoped Slots?

Question

Accepted Answer

**Slots** ermöglichen es einem Parent-Komponenten, **Template-Inhalte** in eine Child-Komponente zu übergeben — sie sind die Möglichkeit, flexible, wiederverwendbare Wrapper (Cards, Modals, Layouts) zu erstellen, bei denen der Consumer das innere Markup kontrolliert. ## Basic slot ```vue ``` ```vue

Title

Any content!

``` Die Child-Komponente definiert ein "Loch" (``); die Parent-Komponente füllt es mit beliebigem Markup. Dies ist viel flexibler als Strings über Props zu übergeben. ## Named slots — mehrere Einfügepunkte ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — Child gibt Daten AN den Slot-Inhalt Manchmal hat die Child-Komponente Daten, die der Slot der Parent-Komponente benötigt (z. B. jedes Element in einer Liste). **Scoped Slots** machen Daten aus der Child-Komponente für das Parent-Template verfügbar: ```vue ``` ```vue ``` Scoped Slots sind der Schlüssel zu **renderless/headless Components**: Die Child-Komponente behandelt die Logik (Looping, Fetching, State) und lässt die Parent-Komponente die Präsentation vollständig kontrollieren. ## Warum es wichtig ist Slots sind Vues Content-Distributing-Mechanismus — essentiell für wiederverwendbare Layout- und Wrapper-Komponenten. Named Slots bieten mehrere Einfügepunkte, und Scoped Slots (die Child-Daten dem Parent-definierten Template verfügbar machen) ermöglichen kraftvolle Muster wie Headless Components und anpassbare Listen/Tabellen. Sie sind das, was Vue-Komponenten kompositorisch statt starr macht.