组件的切换

1、通过v-if或者v-show切换

<template id="login">
        <div>
            登录组件
        </div>
    </template>
    <script>
        const login = {
            template: '#login',
            data() {
                return {
                    flag: true,
                }
            }
        }
    </script>
    <template id="user-info">
        <div>
            用户信息
        </div>
    </template>
    <script>
        const userInfo = {
            template: '#user-info',
            data() {
                return {
                    flag: true,
                }
            }
        }
    </script>

    <div id='app'>
        <login v-if="isLogin"></login>
        <user-info v-else="!isLogin"></user-info>
        <button @click="isLogin=!isLogin">切换</button>

    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                isLogin:true
            },
            components:{
                login,
                userInfo,
            }
        })
    </script>

2、通过vue内置component组件切换（is属性对应就是要显示的组件的名字）

<template id="login">
        <div>
            登录组件
        </div>
    </template>
    <script>
        const login = {
            template: '#login',
            data() {
                return {
                    flag: true,
                }
            }
        }
    </script>
    <template id="user-info">
        <div>
            用户信息
        </div>
    </template>
    <script>
        const userInfo = {
            template: '#user-info',
            data() {
                return {
                    flag: true,
                }
            }
        }
    </script>
    
    <div id='app'>
        <component :is="isLogin?'login':'user-info'"></component>
        <button @click="isLogin=!isLogin">切换</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                isLogin: true
            },
            components: {
                login,
                userInfo,
            }
        })
    </script>

3、组件的动画效果

1、切换的组件用transition包裹起来就行了。

2、需要指定动画的切换顺序，希望先离开，在进入可以设置transition的mode

3、注意事项

1、data必须写成函数，函数必须返回对象

2、template只能有一个根标签

3、引用组件的时候，把驼峰变成-连接

　　案例1：

<style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(100%);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;
        }

        .v-leave,
        .v-enter-to {
            opacity: 1;
            transform: translate(0);
        }
    </style>

    <template id="login">
        <div>
            登录组件
        </div>
    </template>
    <script>
        const login = {
            template: '#login',
            data() {
                return {
                    flag: true,
                }
            }
        }
    </script>
    <template id="user-info">
        <div>
            用户信息
        </div>
    </template>
    <script>
        const userInfo = {
            template: '#user-info',
            data() {
                return {
                    flag: true,
                }
            }
        }
    </script>

    <div id='app'>
        <transition mode="out-in">
            <login v-if="isLogin"></login>
            <user-info v-else="!isLogin"></user-info>
        </transition>

        <button @click="isLogin=!isLogin">切换</button>

    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                isLogin: true
            },
            components: {
                login,
                userInfo,
            }
        })
    </script>

　　案例2：

<style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(100%);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;
        }

        .v-leave,
        .v-enter-to {
            opacity: 1;
            transform: translate(0);
        }
    </style>

    <template id="login">
        <div>
            登录组件
        </div>
    </template>
    <script>
        const login = {
            template: '#login',
            data() {
                return {
                    flag: true,
                }
            }
        }
    </script>
    <template id="user-info">
        <div>
            用户信息
        </div>
    </template>
    <script>
        const userInfo = {
            template: '#user-info',
            data() {
                return {
                    flag: true,
                }
            }
        }
    </script>

    <div id='app'>
        <transition mode="out-in">
            <component :is="isLogin?'login':'user-info'"></component>
        </transition>
        <button @click="isLogin=!isLogin">切换</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                isLogin: true
            },
            components: {
                login,
                userInfo,
            }
        })
    </script>