动态组件实现Tab切换

案例效果：
在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<title>动态组件</title>
		<style>
			.tab-button {
				padding: 6px 10px;
				border-top-left-radius: 3px;
				border-top-right-radius: 3px;
				border: 1px solid #ccc;
				cursor: pointer;
				background: #f0f0f0;
				margin-bottom: -1px;
				margin-right: -1px;
			}

			.tab-button:hover {
				background: #e0e0e0;
			}

			.tab-button.active {
				background: #e0e0e0;
			}

			.tab {
				border: 1px solid #ccc;
				padding: 10px;
			}
			.slide-enter{
				opacity: 0;
			}
			.slide-enter-active{
				transition: all 1s ease;
			}
			.slide-enter-to{
				opacity:1;
			}
		</style>
	</head>
	<body>
		<div id="app" class="demo">
			<button v-for="(tab,index) in tabs" :key="tab" :class="['tab-button', { active: currentTab === index }]" @click="currentTab = index">
				{{ tab }}
			</button>
			<!-- 动态组件 -->
			<transition name="slide">
				<component :is="currentTabComponent" class="tab"></component>
			</transition>
		</div>
		<script src="./js/vue.js"></script>
		<script>
			//全局注册组件
			Vue.component("tab-home", {
				template: "<div>首页组件</div>"
			});
			Vue.component("tab-posts", {
				template: "<div>帖子组件</div>"
			});
			Vue.component("tab-archive", {
				template: "<div>档案组件</div>"
			});

			new Vue({
				el: "#app",
				data: {
					currentTab: 0,
					tabs: ["首页", "帖子", "档案"],
					tabComponent:["tab-Home", "tab-Posts", "tab-Archive"],
				},
				/* 计算属性 */
				computed: {
					currentTabComponent: function() {
						return this.tabComponent[this.currentTab].toLowerCase();
					}
				}
			});
		</script>
	</body>
</html>

欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中…

原文链接：https://blog.csdn.net/weixin_41092938/article/details/124347482