Vue不同组件之间的切换_要实现不同组件的切换,可以使用-CSDN博客

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

本文介绍了Vue中两种组件切换的方法：使用v-if和v-else进行简单切换，适用于两个组件；使用<component>标签结合v-bind动态绑定，实现更灵活的多组件切换。推荐使用后者，因其更具通用性和灵活性。

摘要由CSDN通过智能技术生成

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>