动态组件component

<component>动态组件是一种可以根据数据变化而动态加载不同组件的方式。使用动态组件可以有效地减少代码复杂度，提高组件的复用性和灵活性。

动态组件通过一个特殊的属性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 标签中就可以了

  <KeepAlive>
    <component :is="tabs[active]"></component> 
  </KeepAlive>

KeepAlive的 include 和 exclude

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组件的用法就介绍到这里，喜欢的小伙伴点赞关注加收藏哦！

vue3中的动态组件和KeepAlive组件

目录

动态组件component

KeepAlive

KeepAlive的 include 和 exclude

猜你喜欢