Suggest an edit

Improve this article

Refine the answer for “What is a Slot in Vue.js?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**A slot** is a **mechanism for passing content from a parent component into a child**.
It lets you **make components flexible and reusable** by letting the parent insert its own markup inside the child component.

---

## 1. Example: basic slot

### Child component (`BaseCard.vue`)

```javascript
<template>
  <div class="card">
    <slot></slot> 
  </div>
</template>

### Parent component

```javascript
<template>
  <BaseCard>
    <h2>Card title</h2>
    <p>Card content.</p>
  </BaseCard>
</template>

Everything inside `<BaseCard>...</BaseCard>`
gets inserted where the child component placed `<slot>`.

---

## 2. Named slots

Sometimes you need several different insertion zones (for example, a header and content).
In that case slots can be **named** using `name`.

### Child component:

```javascript
<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>
```

### Parent:

```javascript
<BaseCard>
  <template #header>
    <h2>Title</h2>
  </template>

<p>Main card content</p>

<template #footer>
    <small>Card footer</small>
  </template>
</BaseCard>
```

- `<slot></slot>` with no name is the **default slot**
- `<slot name="...">` is a **named slot**
- The parent uses the `#name` syntax (or `v-slot:name`)

---

## 3. Slot with data (scoped slot)

Sometimes the child component wants to **pass data back to the parent** through the slot.
For this, a slot can carry a "scope" - special variables.

### Child component:

```javascript
<template>
  <ul>
    <slot v-for="item in items" :item="item" :key="item.id"></slot>
  </ul>
</template>

### Parent:

```javascript
<ItemList :items="users">
  <template #default="{ item }">
    <li>{{ item.name }} - {{ item.email }}</li>
  </template>
</ItemList>

- The child component "exports" data (`:item="item"`)
- The parent "destructures" it via `{ item }`
This is called a **scoped slot** (a slot with a scope).

---

## 4. Why slots are needed

- They make components **flexible and universal**
- They let you **insert custom HTML** into a component's template
- They support **dynamic and reactive data**
- They simplify building UI components (layout, modal, card, table, etc.)

---

## 5. Example: `Modal` component

```javascript

<template>
  <div v-if="open" class="modal">
    <div class="content">
      <slot name="header"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

```javascript

<Modal :open="true">
  <template #header><h2>Confirmation</h2></template>
  <p>Are you sure you want to delete this?</p>
  <template #footer>
    <button>Cancel</button>
    <button>OK</button>
  </template>
</Modal>
```

---

## Summary

> **A slot** is a placeholder in a component's template
> where the parent can insert its own content.
>
> There are three types:
>
> 1. **Default** - `<slot></slot>`
> 2. **Named** - `<slot name="header">`
> 3. **Scoped** - `<slot :data="...">`

Markdown · drag & drop images · ⌘B / ⌘I shortcuts459 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.