13.2，不同组件之间的切换

实现标签页的切换（组件的切换）

方式一

使用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>
    Vue.component('login',{
        template:'<h1>登录界面</h1>'
    })
    Vue.component('register',{
        template:'<h1>注册界面</h1>'
    })
    var vm=new Vue({
        el:'#app',
        data:{
            flag:false
        }
    })
</script>

但是v-if和v-else只能有两种情况，所以此时只能有两种需要的组件

---

方式二

<component :is="comName"></component>

使用companent标签，这个标签是Vue官方指定的，可以用来表示哪一个组件显示，这个时候:is=""其中传入一个组件的名称（注意，组件名称是字符串，所以需要单引号）

<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>-->
    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>

    <component :is="comName"></component>
</div>
<script>
    Vue.component('login',{
        template:'<h1>登录界面</h1>'
    })
    Vue.component('register',{
        template:'<h1>注册界面</h1>'
    })
    var vm=new Vue({
        el:'#app',
        data:{
            flag:false,
            comName:''
        }
    })
</script>

当前学习了几个Vue提供的标签

1. component（显示某一个组件）
2. template（组件的模板结构）
3. transition（动画）
4. transitionGroup

案例

实现组件的动画切换

<transition enter-active-class="animated bounce">
    <component :is="comName"></component>
</transition>