Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке scoped slot?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Scoped slot** - це слот, який дозволяє **передавати дані з дочірнього компонента в батьківський**, разом із розміткою. **Ключове:** дитина «ділиться» своїми даними, а батько вирішує, як ці дані відрендерити - це робить компонент гнучкішим і реалізує патерн «render props».Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**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.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.