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为初始化状态。..
·
参考文档：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是等价的）。
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献12条内容
所有评论(0)