一、使用 v-if 与 v-else 相结合的切换方式

在开发中我们经常会遇到点击按钮或者超链接实现组件的切换。

代码如下：

<div id="app">
			<a href="" @click.prevent="flag=true">登录</a>
			<a href="" @click.prevent="flag=false">注册</a>
			<login v-if="flag" ></login>
			<register v-else="flag"></register>
		</div>
		
		<script type="text/javascript" src="../js/vue-2.4.0.js" ></script>
		<script>
			Vue.component('login',{
				template: '<h3>登录组件</h3>'	
			})
			
			Vue.component('register',{
				template: '<h3>注册组件</h3>'
			})
			
			var vm = new Vue({
				el: '#app',
				data: {
					flag:true
				},
			})
		</script>

运行截图

当点击登录的超链接时显示登录的组件，点击注册的超链接时显示注册的组件。不过这种方式只能进行两种模块的切换。

二、使用 Vue 提供的 component 进行切换

代码如下：

<div id="app">
			<a href="" @click.prevent="comName='login'">登录</a>
			<a href="" @click.prevent="comName='register'">注册</a>
			<component :is="comName"></component>
		</div>
		
		<script type="text/javascript" src="../js/vue-2.4.0.js" ></script>
		<script>
			Vue.component('login',{
				template: '<h3>登录组件</h3>'	
			})
			
			Vue.component('register',{
				template: '<h3>注册组件</h3>'
			})
			
			var vm = new Vue({
				el: '#app',
				data: {
					comName: 'login'
				},
			})
		</script>

component 是一个占位符，:is 属性，可以用来指定要展示的组件的名称(组件名称是字符串)。
运行截图同上。