Здравствуйте.
Пишу для себя небольшую библиотеку UI Kit. Смотрю как некоторые вещи делают в других библиотеках и вот не могу понять один момент.
Допустим, хочу написать компонент Tab'ов такого типа:
И вот видно внизу как оформляется в итоге этот компонент (взят с
PrimeVue, но также и у других, Vutify и пр...)
Уберём блоки с контентом, оставим только верхнее меню выбора. Условно :
TestComponent.vue
<TabsBlock value="0">
<TabsItem value="0">Первый таб</TabsItem>
<TabsItem value="1">Второй таб</TabsItem>
<TabsItem value="2">Третий таб</TabsItem>
</TabsBlock>
Получается, что логика того, как реагировать на нажатие TabsItem, сколько бы их небыло реализована в TabsBlock.
Получается
TabsBlock.vue будет:
<template>
<div class="tabs-block">
<slot />
</div>
</template>
При этом и
TabsItem.vue будет со слотом:
<template>
<div class="tabs-item">
<slot />
</div>
</template>
Вопрос! Как это реализовано?
Как в TabsBlock.vue получить данные про все TabsItem в его < slot/>?
Пробовал и через
slot props и через defineExpose. Всё это поднимает данные наверх "сквозь" TabsBlock в TestComponent.vue.
А для того, чтобы прописать логику в TabsBlock нужно знать сколько в его слоте TabsItem, какие emit'ы отрабатывают на каждом и прочее.
Как ко всему этому получить доступ в CompositionAPI script setup lang="ts"
МНЕ ВАЖНО ОСТАВИТЬ ИМЕННО СЛОТЫ! Понятно, что можно реализовать по другому, через передачу props в TabsBlock и там уже через v-for накидать TabsItem. Но надо слоты, потому что хочу контролировать контент. Могу строки туда кинуть, могу иконки. Да и вообще надо и для других компонентов такая механика будет. Например для таблицы, чтобы TableRows отделить от VTable.
Пробовал ковыряться в коде
Vutify но тут tsx, вообще плохо его читаю и там через setup()
Простой
