Vue之组件的切换_c,.k vuc-CSDN博客

本文链接：https://blog.csdn.net/kcorih/article/details/100046808

我们来做一个不同组件之间的切换的简单案例。
比如做一个登录和注册相互切换

 	<div id="app">
        <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>
    <script>
        Vue.component('login',{
                template:"<h3>登录页面</h3>"
        })
        Vue.component('register',{
                template:"<h3>注册页面</h3>"
        })
        var vm=new Vue({
            el:"#app",
            data:{
                flag:false
            },
            methods: {
                
            },
        })
    </script>

接下来我们用component :is 来优化下代码，
component是一个占位符，is属性，可以用来指定要展示的组件的名称。

    <div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        <!-- component是一个占位符，is属性，可以用来指定要展示的组件的名称 -->

        <component :is="comName"></component>
    </div>
    <script>
        
        // 组件名称是字符串
        Vue.component('login',{
            template:'<h3>登录页面</h3>'
        })

        Vue.component('register',{
            template:'<h3>注册页面</h3>'
        })

        //创建vue实例，得到ViewModel
        var vm=new Vue({
            el:"#app",
            data:{
                comName:'login' //当前component 中的 ：is绑定的组件的名称 这里默认为展示登录
            },
            methods:{}
        })
    </script>