有的时候，在不同组件之间进行动态切换是非常有用的。即页面的某个位置要显示的组件是不确定的，是会变化的。（多个组件每次只显示一个并且动态的进行切换）

场景：像局部的小的那种选项卡

语法：

在页面想显示我们多个组件的时候会用下面的语法 来声明挂载点

 <component :is="你具体要显示那个组件的变量"> </component>方法实现

首先在components里先来三个组件（内容随便写）

 然后比如想在Home页面用

<template>
  <div>
      Home页面
      <button @click="fun('One')">点我去one</button>
      <button @click="fun('Two')">点我去two</button>
      <button @click="fun('Three')">点我去three</button>
      <component :is="com"></component>
  </div>
</template>

<script>
import One from "@/components/one.vue"
import Two from "@/components/two.vue"
import Three from "@/components/three.vue"
export default {
    data(){
        return {
            com:"Three"
        }
    },
     methods:{
        fun(data){
            this.com = data
        }
    },
    components:{
        One,Two,Three
    }
}
</script>

记住一句话：多个组件使用同一个挂载点并且动态切换

思考

在动态组件中如果有多个输入框 那么我们在切换动态组件的时候会发现这些驶入框的内容会丢失

在多个路由页面中如果有多个输入框 那么我们在切换路由页面的时候会发现这些驶入框的内容也会丢失

我们在路由或者是动态组件切换的时候，因为每次切换vue都会创建一个新的vue组件实例，所以会丢失

keep-alive

可以在keep-alive包裹的内容，在切换的时候把数据状态保存在内存中，防止重复的DOM渲染 减少了性能与时间上的损耗

比如：用在动态组件之上

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

用在路由之上只需包裹路由的出口

 <keep-alive>
     <router-view/>
 </keep-alive>

动态组件的属性

include 你想缓存谁 (比如我想缓存One)

 <keep-alive  include="One">
        <component :is="com"></component>
  </keep-alive>

可以写多个中间用逗号隔开

<keep-alive  include="One,Two">
     <component :is="com"></component>
</keep-alive>

exclude 你不想缓存谁（我不想缓存One和Two）

<keep-alive  exclude="One,Two">
    <component :is="com"></component>
</keep-alive>

其中exclude的优先级比include高

动态组件的钩子函数

有两个钩子函数 但是在写的时候一定要在被keep-alive所管理的组件中进行使用

activated 进入到被keep-alive管理的组件时候触发

deactivated 离开被keep-alive管理的组件时候触发

<script>
	export default {
        activated(){
            console.log("进入到keep-alive管理的组件了")
        },
        deactivated(){
            console.log("离开了keep-alive管理的组件了")
        }
    }
</script>