Я пытаюсь реализовать компонент вкладок.
Макет моих вкладок:
<tabs>
<tab-link to="tab1">Tab1</tab-link>
<tab-link to="tab2">Tab2</tab-link>
<tab-pane name="tab1">content</tab-pane>
<tab-pane name="tab2">content</tab-pane>
</tabs>
(Очень похоже на то, что сделано в Vuetify.)
В Vue Как реализовать такую структуру компонентов? В React есть функция React.children.map(), поэтому родительский компонент может проверять свои дочерние элементы и принимать решения о рендеринге на основе дочернего типа.
Какой-то шаблон, о котором я подумал:
A <tab-link> нажал, и $emit событие, которое перехватывается <tabs>.
Теперь компоненту <tabs> необходимо найти соответствующий <tab-pane> и сделать его видимым. Как компонент <tabs> может это сделать?
Может быть, другой шаблон?