36. Vue组件切换-使用component元素实现组件切换

小半 • 2022年9月26日下午8:37 • 前端开发 • 阅读 124

需求

在登陆页面的需求中，一般都会有登陆、注册两个按钮，然后点击不同的按钮显示不同的页面。在这里对应的页面可以是一个组件。

那么通过点击不同的按钮，切换不同的组件页面。

下面使用v-if、v-else结合flag来实现这个页面的切换需求。

示例

1.首先创建两个全局组件，作为切换的页面

36. Vue组件切换-使用component元素实现组件切换 — image-20200207152410264

2.设置切换按钮，以及应用两个组件

3.给不同的按钮设置click改变flag的值，通过`v-if`和`v-false`结合`flag`来进行组件切换

4.查看浏览器显示

点击登陆或者注册，切换不同的组件。

那么看到这里，应该就会带来一个疑问，就是v-if和v-else之间是不是就是靠flag作为组合联系的呢。

如果在现在的基础上，在写一个组件3、组件4，用另一个flag2来控制新的切换，是否可以的？

5.编写新的组件3、组件4以及定义flag2参数

6.给组件3、组件4设置按钮进行切换

7.确认两台组件之间是否会相互影响

完整示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--  导入Vue.js库  -->
        <script src="lib/vue.js"></script>

    </head>
    <body>

        <div id="app1">

            <a href="" @click.prevent="flag=true">登陆</a>
            <a href="" @click.prevent="flag=false">注册</a>

            <!-- 登陆组件 -->
            <login v-if="flag"></login>

            <!-- 注册组件 -->
            <register v-else="flag"></register>

            <hr>

            <a href="" @click.prevent="flag2=true">组件3</a>
            <a href="" @click.prevent="flag2=false">组件4</a>

            <!-- 组件3 -->
            <my-com3 v-if="flag2"></my-com3>

            <!-- 组件4 -->
            <my-com4 v-else="flag2"></my-com4>

        </div>

        <script>        
            // 创建登陆组件
            Vue.component('login',{
                template:'<h1>登陆组件</h1>'
            })

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

            // 创建组件3
            Vue.component('my-com3',{
                template:'<h1>组件3</h1>'
            })

            // 创建组件4
            Vue.component('my-com4',{
                template:'<h1>组件4</h1>'
            })

            // 创建第一个Vue的实例
            var vm1 = new Vue({
                el: '#app1',
                data: {
                    flag: true,
                    flag2: true,
                },
            })

        </script>

    </body>
</html>