vue中的组件切换

2019年8月18日

使用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:'<h3>登录组件</h3>'
        })

        Vue.component('register',{
            template:'<h3>注册组件</h3>'
        })

        var vm=new Vue({
           el:'#app',
           data:{
               flag:false
           },
           methods:{}
        });
    </script>

在需要控制的标签上添加v-if和v-else属性
通过点击按钮将flag置为true或者false，实现组件的切换

---

使用component切换组件

组件名是字符串

 Vue.component('login',{
            template:'<h3>登录组件</h3>'
        })

        Vue.component('register',{
            template:'<h3>注册组件</h3>'
        })
        var vm=new Vue({
           el:'#app',
           data:{
               comName:'login' //当前component中的 :is绑定的组件的名称
           },
           methods:{}
        });

页面中的代码
Vue提供了component,来展示对应名称的组件
component是一个占位符,:is属性,可以用来指定要展示的组件的名称

<div id="app">
        <a href="" @click.prevent="comName='login'">登录组件</a>
        <a href="" @click.prevent="comName='register'">注册组件</a>
        
        <component :is="comName"></component>
    </div>

相当于点击按钮之后，将comName这个变量的值修改，从而实现组件的切换

在component外用transtion包裹起来，再设置style就可以为切换添加动画

<transition mode="out-in">
        <component :is="comName"></component>
    </transition>

transition的 mode属性是，当要切换出的组件完全切换出去的时候才允许进入的组件进入

style属性

<style>
    .v-enter,
    .v-leave-to{
        opacity:0;
        transform:translateX(150px)
    }
    .v-enter-active,
    .v-leave-activ{
        transition:all 0.5s ease;
    }
    </style>