Що таке default слот?

VueJunior~1 хв читання

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

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

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

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

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

vue

<template>
  <div class="card">
    <slot></slot> <!-- default слот -->
  </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> <!-- default -->
<slot name="footer"></slot>

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.