vuejs组件间的切换方法

vuejs组件间的切换方法有两种，分别对应两个组件之间的切换和多个组件切换。

两个组件之间的切换：

我们通过v-if和v-else进行切换两个组件的显示，如果v-if为true时显示否则显示另外一个，这里由于true不能写死，所以给写flag，控制flag的真假变换。

<login v-if="flag"></login>
<register v-else></register>

然后我们定义两个组件，然后vue的对象里定义一个flag，控制flag的真假变化来达到切换。

<script>
        Vue.component('login', {
            template: '<h1>登录</h1>'
        })
        Vue.component('register', {
            template: '<h1>注册</h1>'
        })
        //在vue对象里设置flag属性，属性值默认为true
        var vm = new Vue({
            el: '#main',
            data: {
                flag: true,
            }
        })
</script>

然后在div里进行显示，这时候显示的是“登陆，”当点击“注册”时触发click方法，把flag为false传递给组件内的flag，则flag变成了假。

<div id="main" v-cloak>
        <a href="" @click.prevent="flag=true">登录</a>
        <a href="" @click.prevent="flag=false">注册</a>
        <login v-if="flag"></login>
        <register v-else></register>
</div>

“注册”原理亦同。

多个组件之间的切换：

多个组件用component标签显示，component有个is属性，给它定义一个com值，控制com的变化来达到切换目的。

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

我们先创建三个组件，然后在vue对象里设置com的值，这里默认给它设置为“登陆”。

<script>
        Vue.component('login', {
            template: '<h1>登录</h1>'
        })
        Vue.component('register', {
            template: '<h1>注册</h1>'
        })
        Vue.component('register2', {
            template: '<h1>注册2</h1>'
        })
        var vm = new Vue({
            el: '#main',
            data: {
                msg: 'Hello Vue1',
                com: 'login'
            }
        })
</script>

在div里写如下代码，通过点击粗发click事件，改变com的值。

<div id="main" v-cloak>
    <a @click.prevent="com='login'">登录</a>
    <a @click.prevent="com='register'">注册</a>
    <a @click.prevent="com='register2'">注册2</a>
    <component :is="com"></component>
</div>

完整代码如下：

    <div id="main" v-cloak>
        <a @click.prevent="com='login'">登录</a>
        <a @click.prevent="com='register'">注册</a>
        <a @click.prevent="com='register2'">注册2</a>
        <component :is="com"></component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('login', {
            template: '<h1>登录</h1>'
        })

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

        Vue.component('register2', {
            template: '<h1>注册2</h1>'
        })
        var vm = new Vue({
            el: '#main',
            data: {
                com: 'login'
            }
        })
    </script>