【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的include属性

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

 <keep-alive include="Left">
        <component :is="comName"></component>
    </keep-alive>