Рубрики
Vue.js Vue компоненты

Компонент Tabs

Универсальная реализация компонента

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>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *