Универсальная реализация компонента
tabs
массив объектов, содержит обязательно свойство name
comp
динамический компонент, который передаётся через props и используется в атрибуте :is абстрактного компонента component отсека template
resources\js\components\UI\Tabs.vue
<template>
<div>
<ul><li v-for="(tab, n) in tabs"><a :href="`#${n}`">{{tab.name}}</a></li></ul>
<!--в динамический компонент передаются данные-->
<div v-for="(tab, index) in tabs" :id="`${index}`" title=""><component :data="tab" :is="comp"/></div>
</div>
</template>
<script>
export default{
name:'Tabs',
props:{
//массив табов [{имя,контент},...]
tabs:{type:Array,required:true},
//динамическое имя компонента
comp:{type:String,required:true},
},
mounted(){$(this.$el).tabs()},
}
</script>
какой-то компонент использует компонент Tabs
<template>
//имя любого зарегистрированного компонента
//value массив объектов содержит свойства name и data
<Tabs :comp="mycomponent" :tabs="value"/>
</template>