Looking for a clever solution to create a nested component system with efficient rendering? Check out the code snippet below:
custom-tab.vue (child component)
<template>
<slot></slot>
</template>
<script>
export default {
name: 'CustomTab',
props: ['title']
}
</script>
custom-tabs.vue (container component)
<template>
<div class="custom-tabs-switchers">
<b
v-for="(tab, index) in tabs"
:key="`tab-${index}`"
>
{{ tab.componentInstance.props.title }}
</b>
</div>
<div class="custom-tabs-contents">
<div class="custom-tabs-contents-item"
v-for="(tab, index) in tabs"
:key="`tab-content-${index}`"
>
<!-- HOW TO DISPLAY TAB CONTENT HERE??? -->
</div>
</div>
</template>
<script>
export default {
name: 'CustomTabs',
computed () {
tabs () {
return this.$slots.default
}
}
}
</script>
example-page.vue (component with usage example)
<template>
<custom-tabs>
<custom-tab title="first tab"><p>Content of Tab #1</p></custom-tab>
<custom-tab title="second tab"><p>Content of Tab #2</p></custom-tab>
<custom-tab title="third tab"><p>Content of Tab #3</p></custom-tab>
</custom-tabs>
</template>