Hvad er slots og scoped slots?

Question

Accepted Answer

**Slots** lader en parent-komponent sende **template-indhold** til en barn-komponent — de er sådan du bygger fleksible, genanvendelige wrappere (cards, modals, layouts) hvor forbrugeren styrer det indre markup. ## Basic slot ```vue ``` ```vue

Title

Any content!

``` Barn-komponenten definerer et "hul" (``); parent-komponenten fylder det med det markup, den ønsker. Dette er meget mere fleksibelt end at sende strenge via props. ## Named slots — flere indsætningspunkter ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — barn sender data OP til slot-indholdet Sometimes barn-komponenten har data som parent-komponentens slot har brug for (f.eks. hvert element i en liste). **Scoped slots** eksponerer data fra barn til parent-komponentens template: ```vue ``` ```vue ``` Scoped slots er nøglen til **renderless/headless komponenter**: barn håndterer logik (looping, fetching, state) og lader parent fuldt styre præsentationen. ## Hvorfor det betyder noget Slots er Vues content-distributionsmekaniski — essentiel for genanvendelige layout- og wrapper-komponenter. Named slots giver flere indsætningspunkter, og scoped slots (eksponering af barn-data til parent-definerede templates) muliggør kraftfulde mønstre som headless komponenter og tilpasselige lister/tabeller. De er det, der gør Vue-komponenter sammensætelige i stedet for stive.