有的时候,在不同组件之间进行动态切换是非常有用的。即页面的某个位置要显示的组件是不确定的,是会变化的。(多个组件每次只显示一个并且动态的进行切换)
场景:像局部的小的那种选项卡
语法:
在页面想显示我们多个组件的时候会用下面的语法 来声明挂载点
<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包裹的内容,在切换的时候把数据状态保存在内存中,防止重复的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>