Vue组件：动态组件、缓存组件、异步组件
1、动态组件
Vue.js 提供了对动态组件的支持。在使用动态组件时，多个组件使用同一挂载点，根据条件在不同组件之间进行动态切换。动态组件通过使用 Vue.js 中的 <component>元素，动态绑定到该元素的 is 属性，根据 is 属性的值来判断使用哪个组件。
语法格式如下：
<!-- 动态组件 -->
<component :is="componentName"></component>动态组件经常应用在路由控制或选项卡切换中。下面通过一个切换选项卡的实例来说明动态组件的基本用法。
【实例】动态组件的基本用法。
（1）创建 ComponentA.vue 组件
<template>
<fieldset>
<legend>组件A</legend>
<p>博客信息：{{ blogName }}</p>
<p>博客地址：{{ blogUrl }}</p>
</fieldset>
</template>
<script>
export default {
data() {
return {
blogName: '您好，欢迎访问 pan_junbiao的博客',
blogUrl: 'https://blog.csdn.net/pan_junbiao'
}
}
}
</script>（2）创建 ComponentB.vue 组件
<template>
<fieldset>
<legend>组件B</legend>
<p>用户名称：<input type="text" v-model="userModel.userName" /></p>
<p>用户年龄：<input type="number" v-model="userModel.age" /></p>
<p>用户性别：<input id="male" type="radio" value="1" v-model="userModel.sex" />
<label for="male">男</label>
<input id="female" type="radio" value="2" v-model="userModel.sex" />
<label for="female">女</label>
</p>
<button @click="loadData">加载数据</button>
</fieldset>
</template>
<script>
export default {
data() {
return {
userModel: {
userName: '',
age: 0,
sex: 2
}
}
},
methods: {
loadData: function () {
this.userModel.userName = 'pan_junbiao的博客';
this.userModel.age = 36;
this.userModel.sex = 1;
}
}
}
</script>
<style scoped>
.b_text {
width: 300px;
padding: 3px;
font-size: 16px;
}
</style>（3）在 App.vue 根组件中引入两个组件，并实现切换功能
<template>
<button :disabled="active" @click="trigger('ComponentA')">组件 A</button>
<button :disabled="!active" @click="trigger('ComponentB')">组件 B</button>
<!-- 第三步：使用动态组件 -->
<component :is="componentName"></component>
</template>
<script>
//第一步：引用组件
import ComponentA from '@/components/ComponentA.vue';
import ComponentB from '@/components/ComponentB.vue';
export default {
data() {
return {
componentName: 'ComponentA',
active: true
}
},
//第二步：注册组件
components: {
ComponentA,
ComponentB
},
methods: {
//切换组件
trigger: function (componentName) {
this.componentName = componentName;
this.active = !this.active;
}
}
}
</script>
<style>
button {
font-size: 16px;
padding: 5px 20px;
margin: 0px 10px 10px 0px;
}
</style>执行结果：
（1）切换组件A效果：
（2）切换组件B效果：
2、缓存组件
在多个组件之间进行切换的时候，有时需要保持这些组件的状态，将切换后的状态保留在内存中，以避免重复渲染。为了解决这个问题，可以用一个 <keep-alive> 元素将动态组件包含起来。
语法格式如下：
<!-- 缓存组件 -->
<keep-alive>
<component :is="componentName"></component>
</keep-alive>【实例】实现选项卡内容的缓存效果。
修改 App.vue 根组件中引入两个组件，并使用 <keep-alive> 元素实现组件内容的缓存效果。
<template>
<button :disabled="active" @click="trigger('ComponentA')">组件 A</button>
<button :disabled="!active" @click="trigger('ComponentB')">组件 B</button>
<!-- 第三步：使用缓存组件 -->
<keep-alive>
<component :is="componentName"></component>
</keep-alive>
</template>执行结果：
3、异步组件
异步组件是Vue.js中的另一个重要特性，它允许你定义一个组件，但不是立即加载它，而是在需要时才加载。这种机制对于构建大型应用程序尤其有用，因为它可以帮助减少应用程序的初始加载时间，提高性能。异步组件通过动态导入模块来实现，这使得组件的加载成为异步操作。
语法格式如下：
// 第一步：导入 defineAsyncComponent 函数
import { defineAsyncComponent } from 'vue'
// 第二步：定义异步组件
const ComponentB = defineAsyncComponent(() => import('@/components/ComponentB.vue'));【实例】使用异步组件。
修改 App.vue 根组件中引入两个组件，其中组件B使用异步组件。
<template>
<button :disabled="active" @click="trigger('ComponentA')">组件 A</button>
<button :disabled="!active" @click="trigger('ComponentB')">组件 B</button>
<!-- 第三步：使用缓存组件 -->
<keep-alive>
<component :is="componentName"></component>
</keep-alive>
</template>
<script>
// 导入 defineAsyncComponent 函数
import { defineAsyncComponent } from 'vue'
//第一步：引用组件
import ComponentA from '@/components/ComponentA.vue';
//import ComponentB from '@/components/ComponentB.vue';
// 核心代码：定义异步组件
const ComponentB = defineAsyncComponent(() => import('@/components/ComponentB.vue'));
export default {
data() {
return {
componentName: 'ComponentA',
active: true
}
},
//第二步：注册组件
components: {
ComponentA,
ComponentB
},
methods: {
//切换组件
trigger: function (componentName) {
this.componentName = componentName;
this.active = !this.active;
}
}
}
</script>
<style>
button {
font-size: 16px;
padding: 5px 20px;
margin: 0px 10px 10px 0px;
}
</style>