Wat zijn slots en scoped slots?

Question

Accepted Answer

**Slots** laten een parent **template content** in een child component plaatsen — dit is hoe je flexibele, herbruikbare wrappers (cards, modals, layouts) bouwt waarbij de consumer de inner markup controleert. ## Basis slot ```vue ``` ```vue

Title

Any content!

``` Het child component definieert een "gat" (``); de parent vult het met de gewenste markup. Dit is veel flexibeler dan strings via props doorgeven. ## Named slots — meerdere invoegpunten ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — child geeft data OP naar de slot content Soms heeft het child component gegevens die het slot van de parent nodig heeft (b.v. elk item in een lijst). **Scoped slots** stellen gegevens van het child beschikbaar voor de template van de parent: ```vue ``` ```vue ``` Scoped slots zijn sleutel tot **renderless/headless components**: het child handelt logica af (looping, fetching, state) en laat de parent volledig de presentatie controleren. ## Waarom het belangrijk is Slots zijn Vue's content-distribution mechanisme — essentieel voor herbruikbare layout en wrapper components. Named slots bieden meerdere invoegpunten, en scoped slots (die child data aan parent-gedefinieerde templates blootstellen) maken krachtige patronen mogelijk zoals headless components en aanpasbare lijsten/tabellen. Zij zijn wat Vue components compositioneel maakt in plaats van rigide.