父组件:
<template>
<div class="box">
<h3>index父组件</h3>
<!-- 动态组件的切换 -->
<!-- <button @click="changeCom">动态显示组件</button> -->
<!-- 1.使用is实现动态组件 -->
<!-- <div :is="comname"></div> -->
<!-- 2.使用传统的方式进行动态组件切换 -->
<button @click="isShow = !isShow">动态显示组件</button>
<!-- keepalive对当前这个组件进行了缓存,不会在进场创建和销毁 -->
<keep-alive>
<v-one v-if="isShow"></v-one>
<v-two v-else></v-two>
</keep-alive>
</div>
</template>
<script>
import vOne from "./One.vue"
import vTwo from "./Two.vue"
export default {
components:{
vOne,vTwo
},
data(){
return{
comname:"vOne",
isShow:true
}
},
methods:{
changeCom(){
this.comname = this.comname == 'vOne' ? 'vTwo' :'vOne'
}
}
}
</script>
<style scoped>
</style>
子组件:
<template>
<div class="box">
<h3>one子组件</h3>
</div>
</template>
<script>
export default {
created(){
console.log('one组件创建完成');
},
// 缓存组件特有的生命周期函数
// 激活钩子函数,进入组件的时候触发
activated(){
console.log('开启定时器');
},
// 销毁的钩子函数:离开的时候触发
deactivated(){
console.log('关闭定时器');
},
destroyed(){
console.log('one组件销毁完成');
}
}
</script>
<style scoped>
</style>
这样就实现简单的keep-alive缓存了