Vue单页面的动态组件

<template id="my-A">
	<div>
		<p >{{title}}</p>
	</div>
</template>
<template id="my-B">
	<div>
		<p >B组件</p>
	</div>
</template>
<template id="my-C">
	<div>
		<p >C组件</p>
	</div>
</template>
<div id="app">
	<!-- 动态组件 一-->
	<button @click="flag= 'a'">a组件</button>
	<button @click="flag= 'b'">b组件</button>
	<my-a v-if="flag=='a'" :title=" 'aaaa组件' "></my-a>
	<my-a v-if="flag=='b'" :title=" 'bbbb组件' "></my-a>
	<hr>
	<!-- 动态组件 二 判断的是组件的名称-->	
	<button @click="flag2= 'my-b'">b组件</button>
	<button @click="flag2= 'my-c'">c组件</button>
	<component :is="flag2"></component>
 </div>

<script>
new Vue({
	el:'#app',
	data:{
		flag:'a',
		flag2:'my-b'
	},	
	components:{ //组件
		'my-a':{
			template:'#my-A',
			props:['title']
		},
		'my-b':{
			template:'#my-B',
		},
		'my-c':{
			template:'#my-C',
		}
	}
});
</script>

推荐阅读：硬盘盒和移动硬盘区别