vue 动态组件 & 异步组件

动态组件 & 异步组件

vue提供的更方便的方式去完成组件之间的切换----动态组件

1、component组件它是vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件

2、keep-alive 组件当在这些组件之间切换的时候，如果要保持这些组件的状态，以避免反复重渲染导致的性能问题，vue内置组件keep-alive帮我们解决了这个问题。使用 keep-alive 以后，内部包含的组件将增加 激活 和 失活/冻结 的状态

异步组件使用按需加载,加载之后会缓存到本地

 <keep-alive>
   	 <!-- 使用绑定 is 来切换不同的组件 -->
   	 <component  :is="componShow"></component>
    </keep-alive>

实例：

<!--实例一-->
<template>
	<div>
		<div>home</div>
		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />

		<!-- 使用v-if判断是否显示哪一个组件 -->
		<Inbox v-if="componShow"></Inbox>
		<button @click="change">加载组件</button>
	</div>
</template>

<script>
	export default {
		components: {
			Inbox: resolve => {
				require(['../components/Inbox.vue'], resolve)
			}
		},
		data() {
			return {
				componShow: false, //默认不显示
			}
		},
		methods: {
			showCom(target) {
				this.componShow = target
			},
			change() {
				if (this.componShow) {
					this.componShow = false;
				} else {
					this.componShow = true
				}

			}
		}
	}
</script>

<style>
	.box1111111111111111111111111111111111 {
		float: left
	}
</style>

<!--实例二-->
	<template>
	<div>
   <!-- 使用组件作为参数  点击哪一个显示相应的组件-->
   <button @click="showCom('Inbox')"  :class="{'componShow': componShow == 'Inbox'}">收到邮件了啊</button>
   <button @click="showCom('PostMail')"  :class="{'componShow': componShow == 'PostMail'}">发邮件了啊</button>
   <button @click="showCom('RecycleBin')"  :class="{'componShow': componShow == 'RecycleBin'}">回收到垃圾</button>
   
    <!-- 组件实例能够被创建的时候缓存下 -->
    <keep-alive>
   	 <!-- is绑定动态值  来切换不同的组件 -->
   	 <component  :is="componShow"></component>
    </keep-alive>
    
    </div>
    </template>
    <script>
   export default {
   	components:{
   	    //引入组件
   		Inbox:resolve=>{require(['../components/Inbox.vue'],resolve)},
   		PostMail:resolve=>{require(['../components/PostMail.vue'],resolve)},
   		RecycleBin:resolve=>{require(['../components/RecycleBin.vue'],resolve)},
   	},
   	data(){
   		return{
   			componShow:""//默认不显示
   		}
   	},
   	methods:{
   		showCom(target){
   		    console.log(target)//组件名称参数
   			this.componShow = target
   		}
   	}
   	}
</script>