vue 动态组件缓存 keep-alive

最新推荐文章于 2024-05-11 07:07:56 发布

SpringYoungYu

最新推荐文章于 2024-05-11 07:07:56 发布

阅读量84

点赞数

本文链接：https://blog.csdn.net/qq_44917015/article/details/116208766

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tabbtn {
            background-color: greenyellow;
        }

        /* 交集选择器 */
        .tabbtn.active {
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <button v-for="(item,index) in btns" @click="btnhandler(item)">{{item}}</button>
            <keep-alive>
                <p :is="com"></p>
            </keep-alive>
            
        </div>
    </div>
    <template id="con">
        <div>
            <button v-for="(item,index) in btns" :key="index" :class=['tabbtn',{'active':tab==item+'-com'}]
                @click="btnhandler(item)">{{item}}</button>
            <p :is="tab">qweqwe</p>
        </div>
    </template>
    <script src="../../vue.js"></script>
    <script>
        Vue.component("tab-con1", {
            template: "#con",
            data() {
                return {
                    tab: 'tab1-com',
                    btns: ['tab1', 'tab2', 'tab3', 'tab4']
                }
            },
            methods: {
                btnhandler(e) {
                    this.tab = e + '-com';
                }
            },
            // 被缓存的组件重新激活时 不会被调用
            // 不被缓存的组件 卸载后 重新加载 又会重新调用
            mounted() {
                console.log("mounted")
            },
            // 被缓存的组件激活时调用
            // 缓存的组件在被加载的时候被调用 可能比watch好使
            activated(e) {
                console.log("组件被激活",e)
            },
            // 被缓存的组件 停用时调用
            deactivated(e) {
                console.log("组件被停用",e)
            },
            components: {
                "tab1-com": { template: "<h1>tab1</h1>" },
                "tab2-com": { template: "<h1>tab2</h1>" },
                "tab3-com": { template: "<h1>tab3</h1>" },
                "tab4-com": { template: "<h1>tab4</h1>" },
            }
        }
        );
        Vue.component( 'tab-con2',{
            template: "<h1>tab页2</h1>",
        } )
        // root组件
        const vm = new Vue({
            el: '#app',
            data: {
                btns: ['con1', 'con2'],
                com: 'tab-con1'
            },
            methods: {
                btnhandler(e){
                    this.com = "tab-" + e;
                }
            },
        });

    </script>
</body>

</html>

SpringYoungYu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 动态组件缓存 keep-alive

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫