Що таке useSlots()?

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

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

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

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

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

import { useSlots } from 'vue'

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

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

    return {}
  }
}

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

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

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

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

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

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

vue

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

const slots = useSlots()

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

<template>
  <div class="card">
    <div v-if="hasHeader" class="header">
      <slot name="header" />
    </div>

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

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

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

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.

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

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

Premium

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