vue学习笔记：6.2.组件的切换方式

组件的切换方式

1.使用flag=true/false控制

<div id="app">
     <div>
         <input type="button" value="登录" @click="flag=true">
         <input type="button" value="注册" @click="flag=false">
     </div>
     <login v-if="flag"></login>
     <register v-else></register>
 </div>

 <template id="login">
     <h3>登陆模块</h3>
 </template>

 <template id="register">
     <h3>注册模块</h3>
 </template>

 <script>
     Vue.component("login", {
         template: "#login"
     });
     Vue.component("register", {
         template:"#register"
     });
     var vm = new Vue({
         el: '#app',
         data: {
             flag: true
         },
         methods: {
             
         }
     });
 </script>

2.使用 is 属性控制

<div id="app">
    <div>
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
    </div>
    <!-- component 是一个占位符，:is 属性，可以用来指定展示的组件 -->
    <component :is="comName"></component>

    <!-- 总结：当前学习的几个 Vue 提供的标签？？？ -->
    <!-- component, template,   transition, transitionGroup -->

</div>

<template id="login">
    <h3>登陆模块</h3>
</template>

<template id="register">
    <h3>注册模块</h3>
</template>

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

3.组件切换动画

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


<div id="app">
    <div>
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
    </div>
    
    <!-- 通过 mode 属性，设置组件切换方式 -->
    <transition mode="out-in">
        <component :is="comName"></component>
    </transition>

</div>

<template id="login">
    <h3>登陆模块</h3>
</template>

<template id="register">
    <h3>注册模块</h3>
</template>

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