方式一：v-show 或者 v-if&v-else,通過控制一個標志位的bool值來實現組件的切換 []
方式一有局限性，就是只能控制兩個組件間的切換，因為bool值就true和false兩個。
方式二：使用vue官方提供的<component>標簽，通過給這個標簽綁定is屬性實現多個組件之間的切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../js/vue.js"></script>
</head>
<style>
.v-enter,
.v-leave-to{
transform: translateX(150px);
}
/* 動畫四個階段 */
.v-enter-active,
.v-leave-active{
opacity: 0 ;
transition: all 1s ease;
}
</style>
<body>
<div id="app">
<!-- prevent 阻止默認事件，a就是跳轉這個默認事件
v-if為真就渲染v-if這個組件，而不會進入v-else，v-else亦然 -->
<a href="" @click.prevent="flag=true" >登錄</a>
<a href="" @click.prevent="flag=false" >注冊</a>
<login v-if="flag"></login>
<!-- 使用v-if v-else 實現組件切換 -->
<register v-else="flag"></register>
</div>
<div id="app2">
<!-- 點擊a傳入對應組件的名稱 -->
<a href="" @click.prevent="componentname='login'" >登錄</a>
<a href="" @click.prevent="componentname='register'" >注冊</a>
<!--第二種方式實現組件切換，第一種有缺陷，多個vue組件時，無法使用v-if、else -->
<!-- 使用vue 提供的 component標簽 :is=" 組件名稱 " 提供那個就展示那個 -->
</div>
<div id="app3">
<a href="" @click.prevent="componentname='login'" >登錄</a>
<a href="" @click.prevent="componentname='register'" >注冊</a>
<!--如果組件想要實現一些切換效果，只需要在transition 標簽中，設定model='out-in{【先出再進】} /in-out【先進再出】' -->
<transition model='out-in'>
<component :is="componentname">
<!-- 綁定一個變量，變量指向那個組件就展示那個組件， -->
</component>
</transition>
</div>
</body>
<script>
Vue.component('login', {
template:'<h2>這是登錄組件</h2>'
})
Vue.component('register', {
template:'<h3>這是注冊組件</h2>'
})
let vm = new Vue({
el:'#app',
data:{
vmsg:'hello world',
flag:true,
}
})
let vm2 = new Vue({
el:'#app2',
data:{
componentname:'login',
}
})
let vm3 = new Vue({
el:'#app3',
data:{
componentname:'login',
}
})
</script>
</html>