Що таке scoped slot?

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

Scoped slot - це слот, який дозволяє передавати дані з дочірнього компонента в батьківський, разом із розміткою.

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

Scoped slot - це слот із доступом до даних дитини. Дитина «ділиться» своїми даними, а батько вирішує, як ці дані відрендерити.

Це робить компонент гнучкішим і дозволяє реалізовувати патерн «render props».

Класична проблема, яку вирішують scoped slots

Звичайний слот передає лише розмітку від батька -> до дитини.

Але іноді потрібно навпаки:

дитина знає дані
але батько має вирішити як їх відображати

Наприклад:

компонент списку передає кожен елемент списку
батько вирішує, як кожен елемент оформити

Звичайні слоти цього не дозволяють.

Як працює scoped slot?

Дочірній компонент передає дані в слот через props:

vue

<!-- Child.vue -->
<template>
  <slot :user="user"></slot>
</template>

user - це дані в дочірньому компоненті.

Батько отримує дані через v-slot

vue

<!-- Parent.vue -->
<Child v-slot="{ user }">
  <p>{{ user.name }}</p>
</Child>

Батько отримує об'єкт { user }, який прийшов від дитини.

Приклад: список зі scoped slot

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

vue

<!-- ItemList.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['items']
}
</script>

Батьківський компонент:

vue

<ItemList :items="products" v-slot="{ item }">
  <strong>{{ item.title }}</strong> - {{ item.price }}$
</ItemList>

Батько вирішує, як відображати item, хоча дані перебувають у дочірньому компоненті.

Навіщо потрібні scoped slots?

1. Передача даних із дочірнього в батьківський

Звичайні слоти передають лише розмітку - scoped slots передають ще й props.

2. Гнучкість відображення

Батько може повністю контролювати рендеринг даних.

3. Створення універсальних компонентів

Наприклад:

універсальний список
таблиця
dropdown
карусель
сітка карток

Компонент надає дані, батько - дизайн.

4. Патерн «Render Props»

Scoped slots - це Vue-реалізація render props із React.

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

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

Premium

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