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

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

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

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

Контент

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

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

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

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

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

`useSlots()` - це функція з Composition API у Vue 3, яка дозволяє **отримати доступ до всіх слотів компонента всередині** `setup()`.

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

> `useSlots()` **- це спосіб працювати зі слотами в Composition API так само, як** `this.$slots` **в Options API.**

---

## Як використовувати useSlots()

```js
import { useSlots } from 'vue'

export default {
  setup() {
    const slots = useSlots()

console.log(slots) // об'єкт з усіма слотами

return {}
  }
}
```

---

## Що повертає useSlots()

`useSlots()` повертає об'єкт вигляду:

```js
{
  default: Function | undefined,
  header: Function | undefined,
  footer: Function | undefined
}
```

Кожна властивість - **функція**, яка рендерить вміст слоту.

---

## Приклад: перевірка, чи передав батько слот

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

```vue
<script setup>
import { useSlots } from 'vue'

const slots = useSlots()

const hasHeader = !!slots.header
</script>

<div class="body">
      <slot />
    </div>
  </div>
</template>
```

Так можна відображати header лише якщо батько передав вміст для слоту.

---

## Приклад: виведення кількості елементів у default слоті

```js
const slots = useSlots()

onMounted(() => {
  const vnodes = slots.default?.()
  console.log('Default slot contains', vnodes.length, 'elements')
})
```

---

## Коли потрібен useSlots()?

### 1. Коли потрібно перевірити наявність слоту

Наприклад, показувати header лише якщо його передано.

### 2. Коли потрібно програмно обробити вміст слоту

Наприклад, порахувати елементи, модифікувати їх, вибрати потрібні.

### 3. Коли працюєш з Composition API

На відміну від Options API, немає `this.$slots`, тому - `useSlots()`.

### 4. Коли робиш обгортки, layout'и, UI-бібліотеки

Слоти - основний механізм для таких компонентів.

---

## Підсумок (ідеально для співбесіди)

> `useSlots()` **- це функція Composition API, яка повертає об'єкт зі слотами компонента.**
> **Дозволяє перевіряти наявність слотів, рендерити їх програмно і працювати зі слотами всередині** `setup()`**, аналогічно** `this.$slots` **в Options API.**

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

Для рев’юера

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

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