Vue之组件切换 - ellaha

一，使用v-if和v-else指令

1，定义注册和登陆组件，设置flag标识，默认为true

<script>
    Vue.component('login', {
        template: '#tmp1'
    })
    Vue.component('register', {
        template: '#tmp2'
    })
    var vm = new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })
</script>

2，在组件中使用v-if，点击按钮的使用切换flag的值

<body>
<div id="app">
    <a href="#" @click="flag=true">登陆</a>
    <a href="#" @click="flag=false">注册</a>
    <br/>
    <login v-if="flag"></login>
    <register v-else="flag"></register>
</div>
<template id="tmp1">
    <div>
        <h3>登陆</h3>
    </div>
</template>
<template id="tmp2">
    <div>
        <h3>注册</h3>
    </div>
</template>
</body>

3，结果

二，使用component标签

这种方式可以根据给定component组件中comName来切换多个组件

1，定义注册和登陆组件

//组件名称是字符串
    Vue.component('login', {
        template: '#tmp1'
    })
    Vue.component('register', {
        template: '#tmp2'
    })

2，Vue提供了component来展示对应名称的组件

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

    <!--component是一个占位符 :is属性可以用来指定要展示的组件名称-->
    <component :is="comName"></component>
</div>

3，默认给component中绑定组件名称

//创建Vue实例 得到ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            // 当前component中的:is绑定的组件的名称
            comName: 'login'
        }
    })

4，整体代码段

<body>
<div id="app">
    <a href="" @click.prevent="comName='login'">登陆</a>
    <a href="" @click.prevent="comName='register'">注册</a>
    <!--Vue提供了component来展示对应名称的组件
    component是一个占位符 :is属性可以用来指定要展示的组件名称-->
    <component :is="comName"></component>
</div>
<template id="tmp1">
    <div>
        <h3>登陆</h3>
    </div>
</template>
<template id="tmp2">
    <div>
        <h3>注册</h3>
    </div>
</template>
<script>
    //组件名称是字符串
    Vue.component('login', {
        template: '#tmp1'
    })
    Vue.component('register', {
        template: '#tmp2'
    })
    //创建Vue实例 得到ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            // 当前component中的:is绑定的组件的名称
            comName: 'login'
        }
    })
</script>
</body>

5，易出问题代码段

注意：组件名称是字符串，如果写成这种形式，:is涉及到属性绑定，=后面会被当成一个表达式来解析，没有当成字符串

<component :is="login"></component>

因此，需要把login改成字符串

<component :is="'login'"></component>

posted on 2021-04-11 15:11 ellaha 阅读(1053) 评论(0) 收藏举报

刷新页面返回顶部