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

骑猪看日落 2023-05-31 07:16 11阅读 0赞

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

## 动态组件 ##

**首先看下效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

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

![在这里插入图片描述][20191023190500803.png]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

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

![在这里插入图片描述][20191023190637968.png]

## 给按钮添加激活样式 ##

![在这里插入图片描述][20191023190647102.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

## 动态组件嵌套 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]

### 场景： ###

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

### 分析： ###

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

# 动态组件keep-alive #

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

#### 失活缓存keep-alive： ####

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

### 方案： ###

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

## 代码如下： ##

<!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>
    		
    		<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>
    		
    		<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 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230531/942628572f6440779e8bf714eefbc797.png
[20191023190500803.png]: /images/20230531/d4ec52aaf37c461587f27de5855bddfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230531/aaaa40848a5c4c63a48699b815220fbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230531/fa841d19ba94425fa265592058389d51.png
[20191023190637968.png]: /images/20230531/e3c585718976424ca595055fedf9538e.png
[20191023190647102.png]: /images/20230531/905f6b5fe0af4cb4b94f3d1c70a570d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230531/f3148584942a4fca8ff25b153e1c53d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: /images/20230531/14990c94b9084dc2871eae9bd71e2203.png
[20191023190831239.png]: /images/20230531/6519dcf7d9b8447b9a881ba70937ae7a.png