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 {
 		 60%;
 		margin: 0 auto;
 	}
 </style>

第二种

子组件预留插槽的方式
子组件

<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 class="tabs_content">
			<slot></slot>
		</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">
		<alb v-if="currIndex==0"></alb>
		<cate v-if="currIndex==1"></cate>
		<New v-if="currIndex==2"></New>
		<rec v-if="currIndex==3"></rec>
		</tabs>
 	</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,
 				
 			};
 		},
 		mounted() {
			console.log(alb);
		},
 		watch: {},
 		computed: {
			
		},
 		methods: {
 			tabshundle(e) {
 				this.currIndex = e
 			}
 		},
 		components: {
 			tabs,alb,cate,New,rec
 		}
 	};
 </script>
 <style scoped='scoped'>
 	/deep/.tabs_header {
 		 60%;
 		margin: 0 auto;
 	}
 </style>

第三种

利用compone组件动态加在 类似于第二种 再用插槽功能

第四种