vuejs组件间的切换方法

admin2022-01-15367

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>


网友评论