切换方式一

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>独秀不爱秀</title>
</head><body><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 src="./lib/vue-2.4.0.js"></script><script type="text/javascript">Vue.component('login', {template: '<h3>登录组件</h3>'});Vue.component('register', {template: '<h3>注册组件</h3>'});const vm = new Vue({el: '#app',data: {flag: true},});</script>
</body></html>

这个方式唯一的缺陷就是只能在两个组件之前切换，当要求需要三个及三个以上的组件切换的时候，这就不行了(原因是 flag 只有 true 和 false 两个值)，这就要要使用方式二了。

切换方式二

这里，我们需要学到一个 Vue 官方提供的元素 component。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>独秀不爱秀</title>
</head><body><div id="app"><a href="#" @click.prevent="comName = 'login'">登录</a><a href="#" @click.prevent="comName = 'register'">注册</a><!-- Vue 提供的 component 来展示对应名称的组件component 是一个占位符:is 属性指定 组件名称--><component :is="comName"></component></div><script src="./lib/vue-2.4.0.js"></script><script type="text/javascript">// 组件名称是字符串Vue.component('login', {template: '<h3>登录组件</h3>'});Vue.component('register', {template: '<h3>注册组件</h3>'});const vm = new Vue({el: '#app',data: {comName: 'login'// 当前 component 中的 :is 绑定的组件名称
            },});</script>
</body></html>

现在，我们在添加一个退出组件（这是为了证明第二种组件切换方式的好处）

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>独秀不爱秀</title>
</head><body><div id="app"><a href="#" @click.prevent="comName = 'login'">登录</a><a href="#" @click.prevent="comName = 'register'">注册</a><a href="#" @click.prevent="comName = 'out'">退出</a><!-- Vue 提供的 component 来展示对应名称的组件component 是一个占位符:is 属性指定 组件名称--><component :is="comName"></component></div><script src="./lib/vue-2.4.0.js"></script><script type="text/javascript">// 组件名称是字符串Vue.component('login', {template: '<h3>登录组件</h3>'});Vue.component('register', {template: '<h3>注册组件</h3>'});Vue.component('out', {template: '<h3>退出组件</h3>'});const vm = new Vue({el: '#app',data: {// 默认显示 登录组件comName: 'login'// 当前 component 中的 :is 绑定的组件名称
            },});</script>
</body></html>