动态组件和keep-alive

【一】动态组件

【1】不使用动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <style>
        .item{
            width: 150px;
            height: 50px;
            background-color: #15cce2;
            margin:10px;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        .top{
            display: flex;
            justify-content: center;
        }

    </style>
</head>
<body>
<div id="app">
    <h1>动态组件</h1>
    <div class="top">
        <div class="item" @click="current='goods'">
            <span>商品</span>
        </div>
        <div class="item" @click="current='order'">
            <span>订单</span>
        </div>
        <div class="item" @click="current='user'">
            <span>用户</span>
        </div>
    </div>
    <div>
        <goods v-if="current=='goods'"></goods>
        <order v-else-if="current=='order'"></order>
        <user  v-else="current=='user'"></user>
    </div>


</div>
</body>
<script>
    // 定义三个组件
    Vue.component('goods',{
        template:`
        <div>
        <h3>商品页面</h3>
            商品列表
        </div>,
        `
    })
    Vue.component('order',{
        template:`
        <div>
        <h3>订单页面</h3>
            订单内容

        </div>,
        `
    })
    Vue.component('user',{
        template:`
        <div>
        <h3>用户页面</h3>
            用户信息
        </div>,
        `
    })
    var vm = new Vue({el: '#app',
        data: {
            current:'goods'
        },


    })

</script>
</html>

【2】使用动态组件

<div>
        <component :is="current"></component>
</div>

【二】keep-alive

  • 使用keep-alive可以做一个缓存
<div>
        <keep-alive>
            <component :is="current"></component>
        </keep-alive>

    </div>
image-20240428211004681
posted @ 2024-04-29 19:59  -半城烟雨  阅读(9)  评论(0)    收藏  举报