vue组件切换—component标签实现多个组件的切换和组件动画的实现

要点：

1. component是一个占位符，：is，用来指定展示组件的名称，通过绑定变量来实现切换

2.只需将<component>组件定义的标签用<transition>包裹起来即可

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    
    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(200px);
        }
        
        .v-enter-active,
        .v-leave-active{
           transition: all 1s ease; 
        }
    </style>
</head>
<body>
<div id="app">
    <a href="#" @click.prevent="flag='login'">登录</a>
    <a href="#" @click.prevent="flag='register'">注册</a>
    <a href="#" @click.prevent="flag='delete'">注销</a>
    
    <transition mode="out-in">
        <!--mode属性设置生产者消费者模式-->
        <component :is="flag"></component>
        <!--component是一个占位符，：is，用来指定展示组件的名称，通过绑定变量来实现切换-->
    </transition>
</div>
<!--通过v-if或者v-else切换显示注册和登录，但是只能在两种状态下切换-->
<script>
    Vue.component('login',{
        template:'<h3>登录页面</h3>'
    });
    Vue.component('register',{
        template:'<h3>注册页面</h3>'
    });
    Vue.component('delete',{
        template:'<h3>注销页面</h3>'
    });


    var vm = new Vue({
        el:'#app',
        data:{
            flag:'login'
            //通过flag切换component绑定的事件    
        },
        method:{}
    });
</script>
</body>
</html>

添加动画之前效果：

添加后的效果：

vue组件切换—component标签实现多个组件的切换和组件动画的实现

要点：

猜你喜欢