在动态组件上使用 keep-alive
<
<div id="app">
<button @click="A">A</button><button @click="B">B</button>
<hr>
<div>没有加keep-alive标签的</div>
<component :is="type"></component>
<hr>
<div>加了keep-alive标签的</div>
<keep-alive>
<component :is="type"></component>
</keep-alive>
</div>
<style>
span{
margin-right: 12px;
display: inline-block;
background-color: royalblue;
color: white;
}
</style>
<script>
var A = {
data:function(){
return{
note:'click on a blog title '
}
},
template:`
<div>
<span @click="A1">A1</span>
<span @click="A2">A2</span>
<span @click="A3">A3</span>
<p>{{note}}</p>
</div>
`,
methods:{
A1:function(){
this.note ="我是A1";
},
A2:function(){
this.note ="我是A2";
},
A3:function(){
this.note ="我是A3";
},
}
}
var B = {
data:function(){
return{
note:'我是B '
}
},
template:`
<div>
<p>{{note}}</p>
</div>
`,
}
new Vue({
el:'#app',
data:{
type:'A'
},
components:{
A,B
},
methods:{
A:function(){
this.type ="A";
},
B:function(){
this.type ="B";
},
}
})
</script>
分别点击A1或A2或A3,然后点击B,在点击A,查看效果!!效果如下
来源:CSDN
作者:我先睡了哈
链接:https://blog.csdn.net/qq_45240616/article/details/103846190