动态组件
动态组件:动态切换组件的显示与隐藏
通过两个按钮,进行Left和Right两个组件的切换
通过keep-alive include和exclude进行组件的选择缓存还是不缓存
而keep-alive有对应的生命周期activated、deactivated
步骤
普通的导入后,再加入
组件生命周期
Left.vue
created(){
console.log('Left被创建啦!');
},
destroyed() {
console.log('Left被销毁啦!');
},
// keep-alive对应生命周期
activated(){
console.log('Left组件被激活啦!');
},
deactivated(){
console.log('Left组件被缓存啦!');
}
App.vue
<div id="app">
<button @click="comName = 'Left'">展示Left</button>
<button @click="comName = 'Right'">展示Right</button>
<keep-alive include="Left,Right" >
<component :is="comName"></component>
</keep-alive>
</div>
<!-- keep-alive include 指定哪些组件会把内部的组件进行缓存,而exclude销毁组件 -->
data() {
return {
comName:Left
}
}
标签:console,log,alive,keep,组件,动态,Left
From: https://www.cnblogs.com/tupo/p/17263989.html