动态组件

动态组件

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

通过两个按钮，进行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
    }
  }