Vue动态组件实现tab标签页切换

前言：关于组件注册

在 vue 中，实现 Tab 切换主要有三种方式：使用动态组件，使用 vue-router 路由，使用第三方插件。

因为这次完成的功能只是简单切换组件，再则觉得使用路由切换需要改变地址略微麻烦，所以使用的是动态组件实现，如果是在大型应用上，可能使用 vue-router 会方便一些。

先看下最终实现的效果，结构比较简单，顶部的三个 Tab 标签用于切换，内容区域分别为三个子组件。

主要代码（Home.vue）

<template>
	<div class="container">
		<div class="top">
		</div>

		<div id="user-box" class="card">
            //图片可以加载自己的
			<div class="u-pic"><img src="../../public/icons/1.jpg" alt=""></div>
			<div>
				<div class="u-name">DXXKT</div>
				<div class="u-msg">
					<div class="attention">
						<span>11</span>&nbsp;关注
					</div>
					<div class="fans">
						<span>3</span>&nbsp;粉丝
					</div>
					<div class="grade">
						<span>Lv.</span><span>&nbsp;8</span>
					</div>
				</div>
				<div class="u-modify text-center flex flex-row-center text-grave">
					<img src="../../public/icons/add.png" />
					<span>&nbsp;点击添加个人简介</span>
				</div>
			</div>
		</div>

		<div class="tab">
			<div class="tab-nav tab-active" @click="toggleTab('Index')">
				<div>主页</div><span></span>
			</div>
			<div class="tab-nav" @click="toggleTab('Letter')">
				<div>信箱</div><span></span>
			</div>
			<div class="tab-nav" @click="toggleTab('Message')">
				<div>消息</div><span></span>
			</div>
		</div>

        // 子组件，显示不同的 tab
		// is 特性动态绑定子组件
		// keep-alive 将切换出去的组件保留在内存中
		<keep-alive>
			<component :is="currentTab"></component>
		</keep-alive>


	</div>
</template>

<script>
    //引入的三个组件-->想要实现的自己写三个组件替换就好了
	import Index from '../components/Index.vue';
	import Letter from '../components/Letter.vue';
	import Message from '../components/Message.vue';

	export default {
		name: 'Home',
		data() {
			return {
				//currentTab 用于标识当前触发的组件
				currentTab: 'Index'
			};
		},
		components: {
			Index,
			Letter,
			Message
		},
		methods: {
			toggleTab: function(tab) {
				this.currentTab = tab;
			}
		}
	}
</script>

<style scoped="scoped" src="./../static/styles/milk.css"></style>
<style scoped="scoped">
	.container {
		width: 100%;
		background: #fafafa;
		min-height: 100vh;
		padding-bottom: 58px;
	}

	.top {
		width: 100%;
		height: 36vh;
		background-image: linear-gradient(to bottom right, #778beb, #e2e0ed);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		z-index: -999;
		margin-bottom: -50px;
	}

	.card {
		background: #fff;
		border-radius: 0.8rem;
		box-shadow: 0 0 10px #eee;
		width: 90%;
		margin: 25px auto;
	}

	#user-box {
		position: relative;
		border-radius: 1rem !important;
		box-shadow: 0 0 10px #ddd !important;
	}

	.u-pic {
		width: 5rem;
		height: 5rem;
		border-radius: 50%;
		box-sizing: border-box;
		border: 2px solid #fff;
		overflow: hidden;
		position: absolute;
		left: 50%;
		margin-left: -2.5rem;
		margin-top: -2.5rem;
	}

	.u-pic img {
		width: 100%;
		height: 100%;
	}

	#user-box>div:nth-child(2) {
		padding: 50px 0 30px 0;
	}

	.u-name {
		font-size: 1.1rem;
		font-weight: bold;
		text-align: center;
		margin-bottom: 0.5rem;
		color: #555;
	}

	.u-msg {
		display: flex;
		justify-content: center;
		margin-bottom: 8px;
	}

	.u-msg div {
		font-size: 0.6rem;
		color: #888;
		margin: 0 0.8rem;
	}

	.u-msg div span {
		font-weight: bold;
		color: #555;
	}

	.u-modify>img {
		width: 16px;
		height: 16px;
	}

	.tab {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
	}

	.tab-nav>div {
		padding: 0 3px;
		color: #888;
		font-size: 0.8rem;
	}

	.tab-nav>span {
		display: block;
		height: 6px;
		width: 100%;
		margin: 0 auto;
		z-index: -999;
		margin-top: -5px;
		background: rgba(255, 68, 68, 0.795);
		border-radius: 3px;
		visibility: hidden;
	}

	.tab-active>div {
		color: #333;
		font-weight: bolder;
	}

	.tab-active>span {
		visibility: visible;
	}
</style>

关于动态组件的更多学习，可以进入官网查看。如下地址：

动态组件