实现组件切换的第二种方式.html

<!DOCTYPE html>
<html>
<head>
	<title>实现组件切换的第二种方式</title>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id = "app">
		<a href="" @click.prevent = "comName = 'login'">login</a>
		<a href="" @click.prevent = "comName = 'register'">register</a>
		<!--component是Vue提供的元素-->
		<!--component是一个占位符，:is属性可以用来制定组件的名称-->
		<component :is = "comName"></component>
	</div>
</body>
<script type="text/javascript">
	Vue.component('login',{
		template:'<h3>登录组件</h3>'
	});

	Vue.component('register',{
		template:'<h3>注册组件</h3>'
	});

	var app = new Vue({
		el:'#app',
		data:{
			comName:'login'
		}
	});

</script>
</html>