Ответ
Scoped slots в Vue позволяют передавать данные из дочернего компонента в слот родительского компонента. Это полезно, когда нужно кастомизировать отображение данных внутри слота.
Пример:
<!-- Дочерний компонент -->
<template>
<div>
<slot :item="item" :index="index"></slot>
</div>
</template>
<script>
export default {
data() {
return {
item: { name: 'Vue' },
index: 1
}
}
}
</script>
<!-- Родительский компонент -->
<child-component>
<template v-slot:default="slotProps">
{{ slotProps.item.name }} - {{ slotProps.index }}
</template>
</child-component>Ключевые моменты:
- Данные передаются через атрибуты в
<slot> - В родителе доступ через
v-slot(можно сократить до#default) - Можно деструктурировать props:
v-slot="{ item, index }" - Позволяет создавать гибкие компоненты (например, для таблиц, списков)
Ответ 18+ 🔞
А, ну это ж про те самые слоты с данными, которые из дочернего компонента в родительский прокидывают! Штука, блядь, мощная, когда нужно не просто дыру в разметке оставить, а туда ещё и инфу подсунуть.
Смотри, как это работает, ёпта. Внутри своего компонента ты объявляешь обычный <slot>, но, сука, не пустой, а с прицепом — вешаешь на него атрибуты с данными, которые хочешь наружу вывалить.
<!-- Твой компонент-поставщик -->
<template>
<div>
<slot :item="item" :index="index"></slot>
</div>
</template>
<script>
export default {
data() {
return {
item: { name: 'Vue' },
index: 1
}
}
}
</script>Вот этот :item="item" — это и есть, блядь, тот самый волшебный пендель, которым ты данные из своей локальной кухни вышвыриваешь наружу.
А теперь, внимание, хитрая жопа начинается на стороне того, кто твой компонент использует. Там нужно эти летящие на голову данные поймать.
<!-- Тот, кто твой компонент юзает -->
<child-component>
<template v-slot:default="slotProps">
{{ slotProps.item.name }} - {{ slotProps.index }}
</template>
</child-component>Смотри, что происходит: ты объявляешь v-slot:default и даёшь ему какую-нибудь переменную (тут slotProps). В эту переменную, блядь, Vue аккуратненько складывает ВСЕ атрибуты, которые ты на слот навесил в дочернем компоненте. Получается такой объект { item: {...}, index: 1 }. И потом уже из него всё вытаскиваешь.
Но это ещё не всё, ёпта! Чтобы не писать каждый раз slotProps.что-то-там, можно сразу на месте всё разобрать, как чемодан на таможне.
<child-component>
<template #default="{ item, index }">
{{ item.name }} - {{ index }}
</template>
</child-component>Видал? #default — это короткая запись того же v-slot:default. А { item, index } — это деструктуризация, прямо как в обычном JavaScript. Красота, блядь, одним махом распаковал и сразу по полочкам разложил.
Где эта хуйня реально выстреливает? Да где угодно, где логика отделена от внешнего вида! Таблицы, списки, карточки — делаешь умный компонент, который данные готовит и логику обрабатывает, а как это всё нарисовать — отдаёшь на откуп тому, кто твой компонент вызывает. Гибридная хуйня получается, овердохуища гибкая.