动态组件

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

使用组件

1.使用import语法导入需要的组件

2.使用components节点注册组件

3.以标签形式使用刚才注册的组件

<component>

内置的<component>组件，专门用来实现动态组件的渲染
通过is属性，动态指定要渲染的组件

代码简单使用

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
    <button @click="comName='Left'">展示left</button>
    <button @click="comName='Right'">展示Right</button>
    <div class="box">
        <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
  data(){
    return {
      comName:'Left'
    }
  },
  components:{
    Left,
    Right
  }
}
</script>

小tips

• is属性中不能直接拿注册标签名赋值使用

<keep-alive>

通过内置组件keep-alive可以把内部的组件进行缓存，而不是销毁组件，从而解决组件切换导致组件被频繁销毁和重新创建的问题
当组件被缓存时，会自动触发组件的deactivated生命周期函数
当组件被激活时，会自动触发组件的activated生命周期函数
include属性：只有名称匹配的组件会被缓存，多个组件名之间使用英文的逗号分隔

代码浅试

<KeepAlive include="Left,myright">
    <component :is="comName"></component>
</KeepAlive>