Vad är slots och scoped slots?

Question

Accepted Answer

**Slots** låter en förälder skicka **mallinnehål** till en barnkomponent — det är hur du bygger flexibla, återanvändbara omslutningar (kort, modaler, layouter) där konsumenten kontrollerar den inre markeringen. ## Grundläggande slot ```vue ``` ```vue

Title

Any content!

``` Barnet definierar ett "hål" (``); föräldern fyller det med vilken markering som helst. Detta är mycket mer flexibelt än att skicka strängar via props. ## Namngivna slots — flera infogningspunkter ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — barnet skickar data UPPÅT till slot-innehållet Ibland har barnet data som förälderns slot behöver (t.ex. varje objekt i en lista). **Scoped slots** exponerar data från barnet till förälderns mall: ```vue ``` ```vue ``` Scoped slots är nyckeln till **renderless/headless-komponenter**: barnet hanterar logiken (looping, hämtning, tillstånd) och låter föräldern helt kontrollera presentationen. ## Varför det är viktigt Slots är Vues innehållsfördelingsmekanism — väsentlig för återanvändbara layout- och omslutningskomponenter. Namngivna slots ger flera infogningspunkter, och scoped slots (exponering av barndata till förälderdefinerade mallar) möjliggör kraftfulla mönster som headless-komponenter och anpassningsbara listor/tabeller. Detta är vad som gör Vue-komponenter sammansatta snarare än stela.