What are slots and scoped slots?

Question

Accepted Answer

**Slots** let a parent pass **template content** into a child component — they're how you build flexible, reusable wrappers (cards, modals, layouts) where the consumer controls the inner markup. ## Basic slot ```vue ``` ```vue

Title

Any content!

``` The child defines a "hole" (``); the parent fills it with whatever markup it wants. This is far more flexible than passing strings via props. ## Named slots — multiple insertion points ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — child passes data UP to the slot content Sometimes the child has data the parent's slot needs (e.g. each item in a list). **Scoped slots** expose data from the child to the parent's template: ```vue ``` ```vue ``` Scoped slots are the key to **renderless/headless components**: the child handles logic (looping, fetching, state) and lets the parent fully control the presentation. ## Why it matters Slots are Vue's content-distribution mechanism — essential for reusable layout and wrapper components. Named slots provide multiple insertion points, and scoped slots (exposing child data to parent-defined templates) enable powerful patterns like headless components and customizable lists/tables. They're what make Vue components compositional rather than rigid.