组件的加载与keep-alive

组件的加载与keep-alive

keep-alive状态缓存，保持状态

A.组件

<template>
<div>vueA{{msg}}
<button class="" @click="changeactive" type="button">保持状态</button></div>
</template>

<script>
export default{
name:"A",
data(){
return{
msg:"默认"
}
},
methods:{
changeactive(){
this.msg="变化状态"
}
}
}
</script>
<style>
</style>

B组件：

<template>
<div>vueB</div>
</template>

<script>
export default{
name:"B",
data(){
return{

}
}
}
</script>

<style lang="css" scoped>

</style>

AB组件：

<template>
<div>
AB
<!-- <A />
<B /> -->
<button @click="changecom" type="button">切换组件</button>
<keep-alive><component v-bind:is="componentss"></component></keep-alive>
</div>
</template>

<script>
import A from './A'
import B from './B'
export default {
name: "AB",
components: {
A,
B
},
data() {
return {
componentss:A,
flag:false
}
},
methods:{
changecom(){
if(this.flag){
this.flag=false
this.componentss=A;
}else{
this.flag=true
this.componentss=B;
}
}
}
}
</script>
<style>
</style>