动态组件之vue选项卡

最新推荐文章于 2024-04-11 11:03:20 发布

别哭别梦别恋别醉别爱他

最新推荐文章于 2024-04-11 11:03:20 发布

阅读量237

点赞数

分类专栏：今日所学日报

本文链接：https://blog.csdn.net/lihua130427/article/details/102710760

版权

日报同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

今日所学

36 篇文章 0 订阅

订阅专栏

本文介绍了Vue中的动态组件和keep-alive组件，重点讲解了keep-alive如何实现组件的失活缓存，以保留组件状态，避免重复创建。通过示例代码展示了在选项卡场景下keep-alive的使用。

摘要由CSDN通过智能技术生成

keep-alive

keep-alive译为活着—组件的失活缓存
失活缓存keep-alive：
重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来

接下来给大家分享一个选项卡代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}

			.tab_area {
				width: 600px;
				height: 300px;
				border: 1px solid green;
				margin: 20px auto;
				position: relative;
			}

			.tab_area ul {
				width: inherit;
				height: 40px;
				background: rgba(0, 0, 0, 0.3);
				display: flex;
				justify-content: space-around;
			}

			.tab_area ul li {
				width: 25%;
				line-height: 40px;
				text-align: center;

			}

			.tab_area>ul>li:hover,
			.active_tab,
			.tab_area>ul+div>ul>li:hover {
				background: rgba(0, 0, 0, .8);
				color: white;
				cursor: pointer;
			}

			.tab_area>ul+div {
				padding: 20px;
				box-sizing: border-box;
			}

			.tab_area>ul+div>ul {
				width: 100px;
				height: 120px;
				background: rgba(0, 0, 0, .6);
				position: absolute;
				right: 20px;
				bottom: 20px;
			}

			.tab_area>ul+div>ul>li {
				line-height: 40px;
				text-align: center;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<div class="tab_area">
				<ul>
					<li @click="tab_active = tab" v-bind:class="[tab_active == tab?'active_tab':'']" v-for="(tab,index) of tabs">
						{{tabsName[index]}}
					</li>
				</ul>
				<keep-alive>
					<component v-bind:is="tab_option"></component>
				</keep-alive>
			</div>

		</div>

	</body>
	<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/*JS普通变量绑定局部组件*/
		var location1 = {
			template: '<div>公司大本营：北京</div>'
		};
		var location2 = {
			template: '<div>公司分公司亚洲区：石家庄</div>'
		}
		var location3 = {
			template: '<div>公司欧洲分区：伦敦</div>'
		}
		/*全局组件*/
		Vue.component('home', {
			template: `<div>主页相关内容</div>`
		})
		Vue.component('size', {
			template: `<div>公司规模的相关内容</div>`
		})
		Vue.component('location', {
			template: `
				<div>
					<ul>
						<li 
							@click="tab_active_child = tab_child"
							v-bind:class="[tab_active_child == tab_child?'active_tab':'']"
							v-for="(tab_child,index) of tabs_child">
							{{tabs_childName[index]}}
						</li>
					</ul>
					<component v-bind:is="tab_option_child"></component>
				</div>
			`,
			data() {
				return {
					tabs_child: ['location1', 'location2', 'location3'],
					tabs_childName: ['分区1', '分区2', '分区3'],
					tab_active_child: 'location1'
				}
			},
			/*注册局部组件*/
			components: {
				'location1': location1,
				'location2': location2,
				'location3': location3
			},
			computed: {
				tab_option_child() {
					return this.tab_active_child;
				}
			}
		})
		Vue.component('boss', {
			template: `<div>公司主管</div>`
		})
		/*实例化Vue*/
		var app = new Vue({
			el: '#demo',
			data: {
				tabs: ['home', 'size', 'location', 'boss'],
				tabsName: ['主页', '规模', '地址', '主管'],
				tab_active: 'location'
			},
			methods: {

			},
			watch: {

			},
			computed: {
				tab_option() {
					return this.tab_active
				}
			},
			/*注册局部组件*/
			components: {

			},
			mounted() {

			}
		})
	</script>



</html>

别哭别梦别恋别醉别爱他

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态组件之vue选项卡

keep-alivekeep-alive译为活着—组件的失活缓存失活缓存keep-alive：重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来接下来给大家分享一个选项卡代码<!DOCTYPE html><html> <head> <meta charset="ut...
复制链接

扫一扫