【vue动态组件】

vue动态组件

动态切换组件的显示与隐藏

 <!-- 1.component标签是vue内置的，作用:组件的占位符 -->
 <!-- 2.is属性的值，表示要渲染的名字 -->
 
 <!-- keep-alive可以把内部组件进行缓存，保证不会被销毁 -->
    <keep-alive>
        <component :is="comName"></component>
    </keep-alive>
 
 
 <script>
  data() {
    return  {
      // comName表示要展示组件的名字
      comName:"Left"
    }
  },	
 </script>

keep-alive生命周期

当组件被缓存时，会自动触发组件的deactivated 生命周期函数

当组件被激活时，会自动触发组件的activated 生命周期函数

当组件添加<keep-alive>时
//当组件第一次被创建的时候，即会执行created的生命周期也会执行activated
//当组件被激活的时候，只会触发activated生命周期
activated(){
	console.log('组件被激活了,  activated');
}

deactivated(){
	console.log('组件被缓存了,  deactivated');
}

keep-alive的include属性

include属性指定:只有名称匹配的组件会被缓存

//Left组件会被缓存
<keep-alive include="Left">
        <component :is="comName"></component>
 </keep-alive>

keep-alive的exclude属性

exclude 属性指定:只有名称匹配的组件不会被缓存

//Left组件不会被缓存
<keep-alive exclude="Left">
        <component :is="comName"></component>
 </keep-alive>

include属性和exclude属性不能同时用