Vue 组件切换

登录与注册的切换

方式1

<div id="app">
    <a href="" @click.prevent="flag=true">登录</a>       // 非常愚蠢的给 true 和 false 加了引号，一直不能完成组件的切换，搞得怀疑人生 
    <a href="" @click.prevent="flag=false">注册</a>

    <login  v-if="flag"></login>
    <register v-else="flag"></register>
</div>

<script>
    Vue.component('login',{
        template: '<h1>登录组件</h1>'
    })
    Vue.component('register',{
        template: '<h1>注册组件</h1>'
    })
    
    var vm = new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })
</script>

方式2

<div id="app">
    <a href="" @click.prevent="conName='login'">登录</a>
    <a href="" @click.prevent="conName='register'">注册</a>
    
    <component :is="conName"></component>
</div>

<script>
    Vue.component('login',{
        template: '<h1>登录组件</h1>'
    })
    Vue.component('register',{
        template: '<h1>注册组件</h1>'
    })
    
    var vm = new Vue({
        el: '#app',
        data: {
            conName: 'login'
        }
    })
</script>