Table of contents
Dynamic component component
<component>Dynamic components are a way to dynamically load different components according to data changes. Using dynamic components can effectively reduce code complexity and improve component reusability and flexibility.
Dynamic components implement dynamic loading through a special attribute is, and the value of is can be the name of the component or the component object.
Application scenario:
For example, to define three pages, the distribution is Home.vue, Products.vue and Contact.vue, corresponding to the home page, products and personal center respectively, and then define a Tabbar.vue, there are three menus on the Tabbar.vue, the distribution It is the home page, product and personal center. It is required to click the corresponding menu on the Tabbar, and the page will switch to the corresponding page. Here we can use dynamic components to dynamically switch pages
The code is as follows:
Code in 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>
Code in 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>
The subscription publishing mechanism in JavaScript is used here
Create a new store.js file in the src directory, the code is as follows
export default {
datalist:[],
//订阅函数
subscribe(cb) {
this.datalist.push(cb)
},
//发布函数
publish(value){
this.datalist.forEach(cb=>cb(value))
}
}
Then introduce store.js in App.vue, call the subscription function subscribe in the onMounted function, introduce store.js in Tabbar.vue, call the publish function in the click event, publish
By default, a dynamic component instance is destroyed when replaced. This will cause it to lose any changed state in it - when the component is displayed again, a new instance will be created with only the initial state. If we need to realize that the component will not be destroyed when switching, we need to cooperate with the built-in component KeepAlive provided by vue
KeepAlive
KeepAlive is a built-in component whose function is to cache removed component instances when dynamically switching between multiple components. Built-in component for caching dynamic component instances and avoiding multiple renders. By wrapping dynamic components with KeepAlive components, functions such as component caching, reuse, and component performance improvement can be realized.
The use of KeepAlive is very simple, just wrap the dynamic component in the KeepAlive tag
<KeepAlive>
<component :is="tabs[active]"></component>
</KeepAlive>
Include and exclude of KeepAlive
By default, KeepAlive will cache all component instances inside KeepAlive, such as the above example. By default, KeepAlive will cache the Home, Products and Contact components. If we want to cache the contents of the Home and Products components instead of the Contact component, this , we can use
the include or exclude attribute to implement and
include The values can be strings, regular expressions, functions, etc., which represent components that need to be cached and components that do not need to be cached:exclude
-
include: This attribute is used to match the component that needs to be cached. It can be a string indicating the name, or a regular expression, or a function. Pass in the component object and return a Boolean value. Only matching components will be cached. -
exclude: This attribute is used to match components that do not need to be cached. It can be a string indicating the name, a regular expression, or a function. Pass in the component object and return a boolean value. Matched components will not be cached.
include sample code for caching the Home and Products components
// 字符串形式
<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>
The exclude cache does not contain sample code for the Home and Products components
// 字符串形式
<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>
The usage of dynamic components and KeepAlive components in vue is introduced here, friends who like it, like, follow and add collections!