What are slots in Vue?
Quick Answer
Slots let a parent pass template content into a child component — content projection. A default slot is the child's <slot></slot>; named slots (<slot name="header">) let the parent fill specific regions; scoped slots pass data from the child back up to the slot content (<slot :item="item">).
Slots are how a parent injects markup into a child component. The child defines a <slot> where the parent's content should go — so a reusable Card component owns the styling and layout, and the caller passes the actual content. Named slots let the parent fill several specific regions like a header and a footer. And scoped slots go the other way — the child passes data out to the slot, so a table component can loop the rows and let the parent decide how each cell renders. That's the renderless-component pattern.
- A
Cardcomponent renders a border and structure; the parent supplies the body via the default slot. - Named:
<template #header>...</template>in the parent maps to<slot name="header">. - Scoped: a
DataTableloops rows and exposes each row to a scoped slot so the parent decides how to render a cell — a “renderless” pattern. - Provide fallback content inside
<slot>fallback</slot>.