Vue学习笔记（十四）——keep-alive标签用法

参考文档：https://cn.vuejs.org/v2/guide/本文主要介绍keep-alive标签的用法。keep-alive标签用于切换组件时保留隐藏组件的状态。例如当组件a显示时，变更了组件a的data，然后把组件a切换为组件b，再切回组件a：如果组件被keep-alive包裹，则组件a的data为变更后的状态；如果组件未被keep-alive包裹，则组件a的data为初始化状态。..

讨厌走开啦

4257人浏览 · 2019-04-26 22:58:49

讨厌走开啦 · 2019-04-26 22:58:49 发布

参考文档：https://cn.vuejs.org/v2/guide/

本文主要介绍keep-alive标签的用法。

keep-alive标签用于切换组件时保留隐藏组件的状态。例如当组件a显示时，变更了组件a的data，然后把组件a切换为组件b，再切回组件a：如果组件被keep-alive包裹，则组件a的data为变更后的状态；如果组件未被keep-alive包裹，则组件a的data为初始化状态。

以下为示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>keep-alive</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="changeCom">变更组件</button>
    <br><br>
    <span>未使用keep-alive标签：</span>
    <br><br>
    <component :is="currentCom"></component>
    <!-- 使用v-if的效果和上面是一样的 -->
    <!--<container1 v-if="currentCom === 'container1'"></container1>-->
    <!--<container2 v-if="currentCom === 'container2'"></container2>-->
    <br>
    <span>使用keep-alive标签：</span>
    <br><br>
    <keep-alive>
        <component :is="currentCom"></component>
        <!-- 使用v-if的效果和上面是一样的 -->
        <!--<container1 v-if="currentCom === 'container1'"></container1>-->
        <!--<container2 v-if="currentCom === 'container2'"></container2>-->
    </keep-alive>
</div>
<script>
    Vue.component('container1', {
        template: '<div>' +
        '<span>{{containerData}}</span><br>' +
        '<button @click="changeData">变更组件内容</button>' +
        '</div>',
        data: function () {
            return {
                containerData: "container1 data."
            }
        },
        methods: {
            changeData: function () {
                this.containerData = "container1 data has been changed.";
            }
        }
    });
    Vue.component('container2', {
        template: '<div>' +
        '<span>{{containerData}}</span><br>' +
        '<button value="change" @click="changeData">变更组件内容</button>' +
        '</div>',
        data: function () {
            return {
                containerData: "container2 data."
            }
        },
        methods: {
            changeData: function () {
                this.containerData = "container2 data has been changed.";
            }
        }
    });
    new Vue({
        el: '#app',
        data: {
            currentCom: "container1"
        },
        methods: {
            changeCom: function () {
                this.currentCom === "container1" ? this.currentCom = "container2" :
                    this.currentCom = "container1";
            }
        }
    });
</script>
</body>
</html>

操作如下图（可以看到使用keep-alive标签的组件在切回显示状态时containerData保持为变更后的状态，而未使用keep-alive标签的组件在切回显示状态时containerData保持为初始化状态）：
在这里插入图片描述

另外补充说明一点，如果用v-if来替代标签切换的:is，keep-alive同样生效（即v-if和:is是等价的）。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^