Как реализовать подкомпоненты во vue?

Здравствуйте.
Пишу для себя небольшую библиотеку UI Kit. Смотрю как некоторые вещи делают в других библиотеках и вот не могу понять один момент.

Допустим, хочу написать компонент Tab'ов такого типа:
66ccf5811028a346812388.jpeg

И вот видно внизу как оформляется в итоге этот компонент (взят с 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()
  • Вопрос задан
  • 123 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
В верхнем компоненте хранится текущее состояние, которое вместе с методом его обновления через provide / inject предоставляется ниже расположенным компонентам. Например.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы