动态组件component

<template>
	<div>
		<button @click="comName = 'UserName'">账号密码填写</button>
		<button @click= 'comName = 'UserInfo>个人信息填写</button>
		
		<p>下面显示注册组件-动态切换:</p>
		<div style="border: 1px solid red;">
			<component :is="comName"></component>
		</div>
	</div>
</template>

<script>
import UserName from '../components/01/UserName'
import UserInfo from '../components/01/UserInfo'
export default {

    components: {
		UserName,
		userInfo,
	},

    data() {
	    return {
		    comName:'UserName'
  };
},

}
</script>

动态组件<component></component>

动态地绑定到它的 is 属性，我们让多个组件可以使用同一个挂载点，并动态切换,多组件之间实现tab切换。

ps:动态组件是一个不断创建不断销毁的过程，可以使用组件缓存

     用<keep-alive></keep-alive>包裹起来

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