Vue不同组件之间的切换

最新推荐文章于 2024-04-07 22:11:29 发布

Sheldon一蓑烟雨任平生

最新推荐文章于 2024-04-07 22:11:29 发布

阅读量3.2k

点赞数 1

分类专栏： Vue.js 文章标签： vue vue.js javascript

本文链接：https://blog.csdn.net/qq_39055970/article/details/106459053

版权

Vue.js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

Vue不同组件之间的切换

Vue不同组件之间的切换

Vue不同组件之间的切换

组件的切换有两种方式，第一种使用v-if和v-else进行切换，第二种是使用标签名component来实现切换。

使用v-if和v-else进行切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <div id="app">
        <a href="" @click.prevent="flag = !flag">登录</a>
        <a href="" @click.prevent="flag = !flag">注册</a>
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                flag: true
            },
            methods: {

            },
            components: { //定义实例内部私有组件
                login: {
                    template: "<h1>这是自定义的login组件</h1>"
                },
                register: {
                    template: "<h1>这是自定义的register组件</h1>"
                }
            },
        });
    </script>
</body>

</html>

使用v-if和v-else进行切换方式可以实现组件的切换，但是最多只能有2个，有一定的局限性。

使用标签component来实现切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <div id="app">
        <a href="" @click.prevent="comName = 'login'">登录</a>
        <a href="" @click.prevent="comName = 'register'">注册</a>

        <!-- Vue提供了component,来展示对应名称的组件 -->
        <!-- component是一个占位符,:is属性,用来指定要展示的组件的名称 -->
        <!-- <component :is="'login'"></component> -->
        <component :is="comName"></component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                flag: true,
                comName: 'login'
            },
            methods: {

            },
            components: { //定义实例内部私有组件
                login: {
                    template: "<h1>这是自定义的login组件</h1>"
                },
                register: {
                    template: "<h1>这是自定义的register组件</h1>"
                }
            },
        });
    </script>
</body>

</html>

使用<component :is="comName"></component>进行切换，只需要修改comName的值则可以切换成对应名称的组件，没有数量上的限制，可以替换成任何组件。

总结-第二种更好用

使用v-if和v-else进行切换，只能进行两个组件的切换；使用标签component来实现切换，可以切换成任何组件，第二种更为通用，推荐使用。

Sheldon一蓑烟雨任平生

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue不同组件之间的切换

Vue不同组件之间的切换Vue不同组件之间的切换使用v-if和v-else进行切换使用标签component来实现切换总结Vue不同组件之间的切换组件的切换有两种方式，第一种使用v-if和v-else进行切换，第二种是使用标签名component来实现切换。使用v-if和v-else进行切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n
复制链接

扫一扫