Vue（十五）缓存组件

文子阳

已于 2022-05-25 23:02:58 修改

阅读量463

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

于 2022-05-18 16:08:24 首次发布

本文链接：https://blog.csdn.net/wenxingchen/article/details/124844412

版权

vue 专栏收录该内容

101 篇文章 24 订阅

订阅专栏

非缓存组件：在来回切换组件后，组件状态会丢失，即会重新渲染组件。示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--Vue安装-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="currentComp='component1'">组件一</button>
    <button @click="currentComp='component2'">组件二</button>
    <br>
    <br>
    <component :is="currentComp"></component>
</div>
</body>
<script>
    <!--定义组件对象-->
    let component1 = {
        data: function () {
            return {
                count: 1,
            }
        },
        template: '<button style="background-color: #13E8E9" @click="count++">累加{{count}}</button>',
    };

    let component2 = {
        data: function () {
            return {
                count: 1,
            }
        },
        template: '<button style="background-color: red" @click="count++">累加{{count}}</button>',
    };

    new Vue({
        el: '#app',
        data: {
            currentComp: component1,
        },
        methods: {},
        //局部注册组件
        components: {
            'component1': component1,
            'component2': component2,
        }
    })
</script>
</html>

缓存组件：来回切换不会丢失状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--Vue安装-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="currentComp=component1">组件一</button>
    <button @click="currentComp=component2">组件二</button>
    <br>
    <br>
    <keep-alive>
        <component :is="currentComp"></component>
    </keep-alive>
</div>
</body>
<script>
    <!--定义组件对象-->
    let component1 = {
        data: function () {
            return {
                count: 1,
            }
        },
        template: '<button style="background-color: #13E8E9" @click="count++">累加{{count}}</button>',
    };

    let component2 = {
        data: function () {
            return {
                count: 1,
            }
        },
        template: '<button style="background-color: red" @click="count++">累加{{count}}</button>',
    };

    new Vue({
        el: '#app',
        data: {
            //注意component1和'component1'渲染出来的是不同的实例。
            currentComp: component1,
        },
        methods: {},
        //局部注册组件
        components: {
            component1,
            component2,
        }
    })
</script>
</html>

文子阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue（十五）缓存组件

非缓存组件：在来回切换组件后，组件状态会丢失，即会重新渲染组件。示例如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.j
复制链接

扫一扫