Vue 动态组件component
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>