Vue 动态组件component

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

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

语法：

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

<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>