vue封装tab切换

vue封装tab切换

预览：

第一种

通过父传子标题，子传父事件

子组件

<template>
<div class='app'>
<div class="tabs_header">
<div :class="['tabs_header_items',currentIndex==i?'active':'']" @click="itemsClick(i)" v-for="(v,i) in tabs_list"
:key="v">{{v}}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentIndex: 0
};
},
props: ['tabs_list'],
methods: {
itemsClick(i) {
this.currentIndex = i
this.$emit('tabshundle', i)
}
},
};
</script>
<style scoped='scoped'>
.tabs_header {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}.tabs_header_items {
flex: 1;
padding: 10px;
cursor: pointer;
border-bottom: 1px solid transparent;
}.active {
color: red;
border-bottom: 1px solid red;
}
</style>

父组件

<template>
<div>
<tabs :tabs_list="tabs_list.map((v,i)=>v.title)" @tabshundle="tabshundle"></tabs>
<template v-if="currIndex==0">
<rec></rec>
</template>
<template v-else-if="currIndex==1">
<cate></cate>
</template>
<template v-else-if="currIndex==2">
<New></New>
</template>
<template v-else-if="currIndex==3">
<alb></alb>
</template>
</div>
</template>
<script>
import tabs from '../../components/tabs/tabsfb'
import alb from './alb.vue'
import cate from './cate.vue'
import New from './new.vue'
import rec from './rec.vue'
export default {
name: 'app',
data() {
return {
tabs_list: [{
title: '推荐'
},
{
title: '分类'
},
{
title: '最新'
},
{
title: '专辑'
}
],
currIndex: 0,
};
},
methods: {
tabshundle(e) {
this.currIndex = e
}
},
components: {
tabs,alb,cate,New,rec
}
};
</script>
<style scoped='scoped'>
/deep/.tabs_header {
width: 60%;
margin: 0 auto;
}
</style>