vue中动态组件component动态组件的使用

vue中component动态组件的使用
项目中有时候会根据tab来切换相应的组件，这个时候可以用到component组件通过is传入对应的组件名

<component :is="aaa"></component>

通过如上方法使用，可以通过tab标签的点击事件动态修改‘aaa’这个组件名
但是直接这样使用，每一次组件的切换都会重新加载，如果对a组件进行一些操作之后切换到b组件，再次切回到a组件，页面不会保留之前对a组件的相关操作，解决这个问题的办法就是对他嵌套一层keep-alive标签

<keep-alive>
	<component :is="aaa"></component>
</keep-alive>

这样就可以解决上一个问题
如下代码示例：

<button @click="name=='aaa'">aaa</botton>
<button @click="name=='bbb'">aaa</botton>
<keep-alive include='aaa'>
 //include来设置缓存哪些组件，例如这个地方就是只缓存aaa组件，bbb组件不缓存，
 //aaa对应aaa文件中的name属性，如果aaa文件中设置了name名则对应文件内name名，
 //如果没有设置则对应注册引入时的注册名
	<component :is=name></component>
</keep-alive>
<script>
import aaa from './aaa.vue'
import bbb from './bbb.vue'
export default{
	components:{
		aaa,
		bbb
	},
	data(){
		return {
			name:'aaa' //设置默认为aaa组件，通过botton的点击事件来修改组件
		}
	}
}
</script>