Hva er slots og scoped slots?

Question

Accepted Answer

**Slots** lar en parent sende **template content** inn i en child component — det er hvordan du bygger fleksible, gjenbrukbare wrappers (cards, modals, layouts) der konsumenten kontrollerer inner markup. ## Basis slot ```vue ``` ```vue

Title

Any content!

``` Child definerer et "hull" (``); parent fyller det med hvilken som helst markup den ønsker. Dette er langt mer fleksibelt enn å sende strings via props. ## Named slots — flere innsettingspunkter ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — child sender data OPP til slot content Noen ganger har child data som parent sitt slot trenger (f.eks. hvert element i en liste). **Scoped slots** eksponerer data fra child til parent sin template: ```vue ``` ```vue ``` Scoped slots er nøkkelen til **renderless/headless components**: child håndterer logikken (looping, fetching, state) og lar parent kontrollere presentasjonen fullt ut. ## Hvorfor det er viktig Slots er Vue's content-distribution mekanisme — essensielt for gjenbrukbare layout og wrapper components. Named slots gir flere innsettingspunkter, og scoped slots (som eksponerer child data til parent-definerte templates) muliggjør kraftige mønstre som headless components og tilpassbare lister/tabeller. De er det som gjør Vue components komposisjonelle i stedet for stive.