动态组件是一种可以根据数据变化而动态加载不同组件的方式。使用动态组件可以有效地减少代码复杂度,提高组件的复用性和灵活性。
动态组件通过一个特殊的属性is来实现动态加载,is的值可以是组件的名称或组件对象。
应用场景示:
比如要定义三个页面,分布是Home.vue,Products.vue和Contact.vue,分别对应首页、产品和个人中心,再定义一个Tabbar.vue,Tabbar.vue上面有三个菜单,分布是首页、产品和个人中心,要求点击Tabbar上对应的菜单,页面切换到对应的页面,这里我们就可以使用动态组件来动态切换页面
代码如下:
App.vue中的代码
<template>
<Tabbar></Tabbar>
<component :is="tabs[active]"></component>
</template>
<script setup>
import Tabbar from './components/Tabbar.vue';
import Home from './components/Home.vue';
import Products from './components/Products.vue';
import Contact from './components/Contact.vue';
import { onMounted,reactive,ref } from 'vue';
import store from './store'
const active = ref('Home')
const tabs = {
Home,
Products,
Contact
}
onMounted(() => {
// 订阅
store.subscribe((value)=>{
active.value = value
})
})
</script>
<style scoped>
</style>
Tabbar.vue中的代码
<template>
<div>
<ul>
<li v-for="item in menuList" :key="item.key" @click="handleClick(item.key)">{{ item.name }}</li>
<!-- <li @click="handleClick('Home')">首页</li>
<li @click="handleClick('Products')">产品</li>
<li @click="handleClick('Contact')">个人中心</li> -->
</ul>
</div>
</template>
<script setup>
import store from '../store'
import Home from './Home.vue';
const menuList = [
{
key:'Home',
name:'首页'
},
{
key:'Products',
name:'产品'
},
{
key:'Contact',
name:'个人中心'
},
]
function handleClick(value) {
// console.log(value);
store.publish(value)
}
</script>
<style scoped>
ul {
position: fixed;
bottom: 10px;
height: 50px;
line-height: 50px;
width: 100%;
display: flex;
justify-content: space-around;
list-style: none;
}
</style>
这里用到了JavaScript中的订阅发布机制
在src目录下新建store.js文件,代码如下
export default {
datalist:[],
//订阅函数
subscribe(cb) {
this.datalist.push(cb)
},
//发布函数
publish(value){
this.datalist.forEach(cb=>cb(value))
}
}
然后在App.vue中引入store.js,在onMounted函数中调用订阅函数subscribe,在Tabbar.vue中引入store.js,在点击事件中调用发布函数,publish
默认情况下,一个动态组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时,会创建一个只带有初始状态的新实例。如果我们需要实现切换组件时不被销毁,我们就需要配合vue为我们提供的内置组件KeepAlive
KeepAlive是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例。用于缓存动态组件实例并避免多次渲染的内置组件。通过使用 KeepAlive 组件包裹动态组件,可以实现组件的缓存、复用、提高组件性能等功能。
KeepAlive 的使用方式非常简单,只需要将动态组件包裹在 KeepAlive 标签中就可以了
<KeepAlive>
<component :is="tabs[active]"></component>
</KeepAlive>
KeepAlive默认会缓存KeepAlive内部的所有组件实例,比如上面的示例,默认情况下,KeepAlive会缓存Home、Products和Contact组件,如果我们希望值缓存Home和Products组件的内容,不想缓存Contact组件的内容,这时,我们就可以使用
include 或 exclude 属性来实现
include
和 exclude
的值可以是字符串、正则表达式、函数等类型,分别表示需要缓存的组件和不需要缓存的组件:
include
:该属性用于匹配需要缓存的组件,可以是一个字符串表示名称,也可以是一个正则表达式,或一个函数,传入组件对象,返回一个布尔值。只有匹配到的组件才会被缓存。
exclude
:该属性用于匹配不需要缓存的组件,可以是一个字符串表示名称,也可以是一个正则表达式,或一个函数,传入组件对象,返回一个布尔值。被匹配到的组件将不会被缓存。
include 缓存Home和Products组件的示例代码
// 字符串形式
<KeepAlive include="Home,Products">
<component :is="tabs[active]"></component>
</KeepAlive>
//正则表达式 (需使用 v-bind)
<KeepAlive :include="/Home|Products/">
<component :is="tabs[active]"></component>
</KeepAlive>
//数组形式 (需使用 v-bind)
<KeepAlive :include="['Home','Products']/">
<component :is="tabs[active]"></component>
</KeepAlive>
exclude缓存不包含Home和Products组件的示例代码
// 字符串形式
<KeepAlive exclude="Home,Products">
<component :is="tabs[active]"></component>
</KeepAlive>
//正则表达式 (需使用 v-bind)
<KeepAlive :exclude="/Home|Products/">
<component :is="tabs[active]"></component>
</KeepAlive>
//数组形式 (需使用 v-bind)
<KeepAlive :exclude="['Home','Products']/">
<component :is="tabs[active]"></component>
</KeepAlive>
关于vue中的动态组件和KeepAlive组件的用法就介绍到这里,喜欢的小伙伴点赞关注加收藏哦!