這里，我用一個注冊登錄兩組件的切換實例來演示：
切換方式一
<!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>
切換成功。