Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке default слот?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Default слот (за умовчанням)** - це основний слот компонента, який використовується **коли у слота немає імені**.
Це найпростіший і найчастіше використовуваний тип слота у Vue.

Простіше кажучи:

> **Default слот - це місце в дочірньому компоненті, куди батько може вставити свій основний контент.**

---

## Як виглядає default слот?

### Дочірній компонент:

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

### Батько:

```vue
<Card>
  <p>Текст, який потрапить у default слот</p>
</Card>
```

Результат:

```html
<div class="card">
  <p>Текст, який потрапить у default слот</p>
</div>
```

---

## Навіщо потрібен default слот?

- вставляти основний контент у компонент
- робити компоненти гнучкими
- дозволяти батьку керувати вмістом
- мінімізувати кількість props, передаючи HTML напряму

---

## Приклад: default слот для модалки

### Modal.vue:

```vue
<template>
  <div class="modal">
    <slot></slot>
  </div>
</template>
```

### Використання:

```vue
<Modal>
  <h1>Заголовок</h1>
  <p>Опис модалки</p>
  <button>Закрити</button>
</Modal>
```

---

## Особливості default слота

#### Не можна вказувати ім'я

Він завжди:

```html
<slot></slot>
```

або коротше:

```html
<slot />
```

#### Можна використовувати одночасно з іменованими слотами

Приклад:

```vue
<slot name="header"></slot>
<slot></slot> 
<slot name="footer"></slot>
```

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати182 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.