<template>
  <div id="app">
    <h1>根组件</h1>
    <hr>
    <div class="container">
      <!-- <left></left>
      <Right></Right> -->
      <component :is="comName"></component>
    </div>
   
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

export default {
  
  name: 'App',
  data(){
    return{
      comName:'Right'
    }
  },
  components: {
    Left,
    Right
  }
}
</script>

<component> 是vue提供的内置组件,专门用来实现动态组件的渲染。它是一个占位符，给组件占位，is属性的值，表示动态的名字，用:is绑定哪个组件的名称，就在这个位置渲染这个组件。

组件被动态显示和隐藏的时候，会被销毁，这时候，如果希望，隐藏的时候，不被销毁，用<keep-alive>标签包裹起来即可。

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

 

 当我们遇到需要监听keep-alive标签包裹的组件，什么时候被缓存，什么时候被激活的时候，会触发组件的deactivated和activated生命周期函数。

当组件第一个被创建的时候，会触发ctrated生命周期函数，也会触发activated生命周期函数；

当组件被激活的时候，不会触发created生命周期函数，会触发activated生命周期函数。因为组件没有被重新创建。

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

include属性用来指明需要对哪些组件进行缓存，多个组件名之间，用逗号隔开