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为初始化状态。

以下为示例代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>keep-alivetitle>
    <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>
    
    
    
    <br>
    <span>使用keep-alive标签:span>
    <br><br>
    <keep-alive>
        <component :is="currentCom">component>
        
        
        
    keep-alive>
div>
<script>
    Vue.component('container1', {
        template: '
' + '{{containerData}}
'
+ '' + '
'
, data: function () { return { containerData: "container1 data." } }, methods: { changeData: function () { this.containerData = "container1 data has been changed."; } } }); Vue.component('container2', { template: '
' + '{{containerData}}
'
+ '' + '
'
, 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保持为初始化状态):
Vue学习笔记(十四)——keep-alive标签用法_第1张图片

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

你可能感兴趣的:(Vue)