学习VUE第九天课程（VUE之组件（动态组件及keep-alive））

最新推荐文章于 2022-11-06 20:13:47 发布

web 沐

最新推荐文章于 2022-11-06 20:13:47 发布

阅读量192

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_45582846/article/details/102708835

版权

Vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

VUE之组件（动态组件及keep-alive）

动态组件

首先看下效果图：
在这里插入图片描述

选项卡效果可以通过 Vue 的元素加一个特殊的 is 特性实现

在这里插入图片描述

Vue可以在不同组件之间进行动态切换，这种方法称为动态组件。

在这里插入图片描述

接下来给按钮添加点击事件，点击切换

在这里插入图片描述

给按钮添加激活样式

在这里插入图片描述

动态组件嵌套

组件同样可以实现选项卡嵌套

在这里插入图片描述

场景：

你会注意到，如果你选择了一个选项two，切换到其他标签，然后再切换回公司信息，是不会继续展示你之前选择的two选项的。

分析：

这是因为每次切换新标签的时候，Vue 都创建了一个新的child_option实例

动态组件keep-alive

keep-alive译为活着—组件的失活缓存

失活缓存keep-alive：

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

方案：

为了解决这个问题，可以用一个元素将其动态组件包裹起来。
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>demo</title>
		<!-- 动态组件&&嵌套&&失活缓存 -->
		<style type="text/css">
			/* 代码初始化 */
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style-type: none;
			}
			[v-cloak]{
				display: none;
			}
			/* 代码主体 */
			.tab_area{
				width: 800px;
				height: 600px;
				margin: 50px auto 0;
				box-shadow: 0 0 3px black;
			}
			.tab_area>ul{
				width: inherit;
				height: 50px;
				background: rgba(0,0,0,0.3);
				display: flex;
				justify-content: space-around;
			}
			.tab_area>ul+div{
				width: inherit;
				height: inherit;
				padding: 20px;
				box-sizing: border-box;
				position: relative;	
			}
			.tab_area>ul+div>ul{
				width: 400px;
				height: 180px;
				position: absolute;
				right: 0;
				bottom: 100px;
			}
			.tab_area>ul+div>ul>li{
				width: inherit;
				height: 60px;
				line-height: 60px;
				text-align: center;
				border: 1px solid black;
			}
			.tab_area>ul>li{
				line-height: 50px;
				width: 25%;
				text-align: center;
			}
			/* li鼠标滑上样式 */
			.tab_area>ul>li:hover,
			.tab_area>ul+div>ul>li:hover,
			/* 默认激活样式 */
			.tab_active,
			.active_tab{
				background: rgba(0,0,0,0.8);
				color: white;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<!-- HTML 对英文的大小写不敏感 -->
		<div id="app" v-cloak>
			<div class="tab_area">
				<ul>
					<li
					@click="tab_option = tab"
					v-for="(tab,index) of tabs"
					v-bind:class="[tab_option==tab?'tab_active':'']"
					>
					{{tabsName[index]}}
					</li>
				</ul>
				<keep-alive>
					<component v-bind:is="tab_option"></component>
				</keep-alive>
			</div>
		</div>
		<!-- Vue的js文件引入 -->
		<script src="../vue10.9练习/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 demo = new Vue({
				el: '#app',
				data: {
					tabs:['home','size','location','boss'],
					tabsName:['主页','规模','地址','主管'],
					tab_option:'home'
				},
				methods:{
					
				},
				computed:{
					
				},
				/* 注册局部组件 */
				components:{
					tab_option(){
						return this.tab_active
					}
				},
				mounted(){
					
				}
			})
		</script>
	</body>
</html>

如有问题或者疑问请留言联系小编！！！

感谢来访！！！！1

web 沐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习VUE第九天课程（VUE之组件（动态组件及keep-alive））

VUE之组件（动态组件及keep-alive）动态组件首先看下效果图：选项卡效果可以通过 Vue 的元素加一个特殊的 is 特性实现Vue可以在不同组件之间进行动态切换，这种方法称为动态组件。接下来给按钮添加点击事件，点击切换给按钮添加激活样式动态组件嵌套组件同样可以实现选项卡嵌套场景：你会注意到，如果你选择了一个选项two，切换到其他标签，然后再切换回公司...
复制链接

扫一扫