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

小咪咪 2023-05-31 07:20 18阅读 0赞

## 动态组件 ##

*  **首先看下效果图**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]
 *  选项卡效果可以通过 Vue 的 元素加一个特殊的 is 特性实现，下图：  
    ![在这里插入图片描述][20191023193916477.png]
 *  Vue可以在**不同组件之间进行动态切换**，这种方法称为动态组件，下图：  
    ![在这里插入图片描述][20191023194012580.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]
 *  ①绑定is特性
 *  ②绑定计算属性
 *  此时，切换activeTab便可以切换展示信息。，下图：  
    ![在这里插入图片描述][20191023194124379.png]
 *  接下来给按钮添加点击事件，点击切换，下图：  
    ![在这里插入图片描述][20191023194205849.png]
 *  给按钮添加激活样式，下图：  
    ![在这里插入图片描述][20191023194253215.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]

## 动态组件嵌套 ##

*  组件同样可以实现选项卡嵌套  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]
 *  上图场景：你会注意到，如果你选择了一个选项two，切换到其他标签，然后再切换回公司信息，是不会继续展示你之前选择的two选项的
 *  上图分析：这是因为每次切换新标签的时候，Vue 都创建了一个新的child\_option实例

## 动态组件keep-alive ##

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

*  失活缓存keep-alive：
    
     *  重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。
 *  方案：
    
     *  为了解决这个问题，可以用一个 元素将其动态组件包裹起来。  
        ![在这里插入图片描述][20191023194527253.png]  
        **下面的代码是完整的vue选项卡以及动态组件嵌套选项卡**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    				list-style: none;
    			}
    
    			.tab_area {
    				width: 500px;
    				height: 500px;
    				border: 1px solid;
    				margin: 20px auto;
    				position: relative;
    			}
    
    			.tab_area>ul {
    				width: 100%;
    				height: 60px;
    				background: rgba(00, 00, 00, .3);
    				display: flex;
    				justify-content: space-between;
    			}
    
    			.tab_area>ul>li {
    				width: 25%;
    				height: 100%;
    				cursor: pointer;
    				text-align: center;
    				line-height: 50px;
    			}
    
    			.tab_area>ul>li:hover,
    			.active_tab {
    				background: rgba(00, 00, 00, .5);
    				color: white;
    			}
    
    			.tab_area>div {
    				width: 100%;
    				height: 440px;
    				background-color: rgba(00, 00, 00, 0.1);
    				font-size: 30px;
    				padding: 30px;
    				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 class="demo">
    			<div class="tab_area">
    				<ul>
    					<li 
    					v-bind:class="[tab_active == tab?'active_tab':'']" 
    					v-for="(tab,index) of tabs" 
    					@click="tab_active = tab">
    						{
       {tabsName[index]}}
    					</li>
    				</ul>
    				<keep-alive>
    					<component v-bind:is="tab_option"></component>
    				</keep-alive>
    			</div>
    		</div>
    	</body>
    	<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('home', {
    			template: `<div>我是主页相关内容</div>`,
    		})
    		Vue.component('size', {
    			template: `<div>我是规模相关内容</div>`,
    		})
    		Vue.component('location', {
    			template: `
    			<div>
    				<ul>
    					<li
    					v-bind:class="[tab_active_child == tab_child?'active_tab':'']"
    					@click="tab_active_child = tab_child"
    					 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: ['北京', '石家庄', '伦敦'],
    					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: '.demo',
    			data: {
    				tabs: ['home', 'size', 'location', 'boss'],
    				tabsName: ['主页', '规模', '地址', '主管'],
    				tab_active: 'home'
    			},
    			methods: {
    
    			},
    			computed: {
    				tab_option() {
    					return this.tab_active
    				}
    			}
    		})
    	</script>
    </html>

## 完毕！！！有问题留言小编… ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230531/76e4b7631bf642b8bac5df6368612a32.png
[20191023193916477.png]: /images/20230531/dc140ce8f53e479aa1238b9e29cb2ea8.png
[20191023194012580.png]: /images/20230531/54761b9895ee49e79f9e973411431da2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230531/b0847ad4a989488d92f04efe7082ee67.png
[20191023194124379.png]: /images/20230531/2e1d055c725e43ef8295cc463289e449.png
[20191023194205849.png]: /images/20230531/73de06526ee54e119d7656d4a2e82a3b.png
[20191023194253215.png]: /images/20230531/19ede568c6684f689d2ecc4a3ab36e34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230531/5431babe245b4400894efc18fb0fa533.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230531/8c6b4aaf3da34084a0abcc5958f2b99c.png
[20191023194527253.png]: /images/20230531/23737cf65b7a4d86b6abe05c4e4b516d.png