Vue 第六章组件切换component

Posted 2021-03-04 ywjfx

tags:

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

component案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn镜像快速导入Vue包-->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<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:‘<h1>登陆组件</h1>‘
    })

    Vue.component(‘register‘,{
        template:‘<h1>注册组件</h1>‘
    })

    //2.创建一个vue实例
    var vm = new Vue({
        el: ‘#app‘,    //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
        data: { //data属性中存放的是el中要用到的数据
            comName:‘‘, //当前绑定的组件名称
            msg: ‘欢迎学习Vue‘ //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序
        }
    })
</script>
</body>
</html>

transition-group渲染案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn镜像快速导入Vue包-->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <style>
        li{
            border: 1px dashed #999999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
        }

        li:hover{
            background-color: red;
            transition: all 0.8s ease;
        }

        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform:translateY(100px)
        }

        .v-enter-active，
        v-leave-active{
            transition: all 0.6s ease;
        }


    </style>
</head>
<body>
<div id="app">
<div>
   id: <input type="text" v-model="id">
    name: <input type="text" v-model="name">
    <input type="button" value="添加" @click="add">
</div>
    <ul>
<!--        对列表进行渲染，不能使用transition，只能用transition-group-->
        <transition-group>
            <li v-for="item in list" :key="item.id">
              {{item.id}}------{{item.name}}
            </li>
        </transition-group>
    </ul>
</div>
<script>
    //2.创建一个vue实例
    var vm = new Vue({
        el: ‘#app‘,    //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
        data: { //data属性中存放的是el中要用到的数据
            id:‘‘,
            name:‘‘,
            list:[
                {id:1,name:‘yang‘},
                {id:2,name:‘wen‘},
                ]
        },
        methods:{
            add(){
                this.list.push({id:this.id,name:this.name})
            }
        }
    })
</script>
</body>
</html>

以上是关于Vue 第六章组件切换component的主要内容，如果未能解决你的问题，请参考以下文章

vue3.0快速上手教程之vue--组件02

Vue内置的Component标签用于动态切换组件

Vue 第六章 组件切换component

Vue 第六章组件切换component