vue实现组件切换的两种方式

Posted 2020-12-02 angle-xiu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue实现组件切换的两种方式相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <title>组件的切换</title>
        <meta charset="utf-8">
    </head>
    <body>
        <!-- 方式一:结合v-if及v-else 只能实现两个组件的切换-->
        <div id="app">
            <!-- 添加事件修饰符prevent，阻止跳转 -->
            <a href="" @click.prevent="flag=true">登录</a>
            <a href="" @click.prevent="flag=false">注册</a>
            <login v-if="flag"></login>
            <register v-else="flag"></register>
        </div>
        <!-- 方式二：使用vue提供的元素component 可实现多个组件的切换-->
        <div id="app2">
                <a href="" @click.prevent="comName=login">登录</a>
                <a href="" @click.prevent="comName=register">注册</a>
            <!-- vue提供的元素，来展示对应名称的组件 -->
            <!-- component是一个占位符，:is属性是指定组件的名称 -->
            <component :is="comName"></component>
        </div>
    </body>
    <script src="node_modulesvuedistvue.js"></script>
    <script>
        Vue.component("login",{
            template:"<h3>登录组件</h3>"
        })
        Vue.component("register",{
            template:"<h3>注册组件</h3>"
        })
        let vm = new Vue({
            el:"#app",
            data:{
                flag:false
            }
        });
        let vm2 = new Vue({
            el:"#app2",
            data:{
                comName:"login"
            }
        })
    </script>
</html>

以上是关于vue实现组件切换的两种方式的主要内容，如果未能解决你的问题，请参考以下文章

vue书写样式的两种方式

vue中router切换的两种方式

通过Vue路由传参的两种方式及Vue组件中接收参数的方式