当前位置：首页 > news >正文

Vue 2 动态组件和异步组件

news 2025/7/6 18:37:11

先阅读【Vue 2 组件基础】中的初步了解动态组件。

动态组件与keep-alive

我们知道动态组件使用is属性和component标签结合来切换不同组件。

下面给出一个示例：

<!DOCTYPE html>
<html><head><title>Vue 动态组件</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><!--  tab 标签页 --><div><button @click="tab = 'home'">首页</button><button @click="tab = 'posts'">文章</button></div>父组件count: {{count}}<!--  动态组件 --><component :is="tab" @increment="count=$event"></component></div><script>//  注册组件Vue.component('home', {data: function () {return {count: 0}},template: `<div><div>首页内容</div><div>子组件count: {{count}}</div><button @click="count++;$emit('increment', count)">点击了{{count}}次</button></div>`,});Vue.component('posts', {template: '<div>文章内容</div>'});var vm = new Vue({el: '#app',data: {tab: 'home',count: 0},});</script>
</body></html>
<script>

在这里插入图片描述

看代码可以知道父组件的count会在子组件count更新后变为子组件的count值。但我们切换组件后再切换回来，会发现父组件count没变，子组件count变为初始值。这是因为，每次切换组件都会创建当前组件的新实例。

那怎么保存先前组件的状态呢？

Vue提供了keep-alive组件。我们使用该元素将要缓存的组件包裹起来。让我们看看效果：

<keep-alive><component :is="tab" @increment="count=$event"></component>
</keep-alive>

在这里插入图片描述

成功解决问题！

了解更多keep-alive组件的细节。

异步组件

异步组件是一种加载组件的方式，它允许我们将组件的加载推迟到需要时再进行，以提高应用程序的性能和加载速度。

我们可以通过不同的方式使用异步组件。

1.工厂函数

使用Vue.component方法来定义一个异步组件工厂函数：

Vue.component('async-component',function(resolve,reject){//模拟异步加载，延迟一段时间后解析组件setTimeout(function(){resolve({template:'<div><h2>Async Component Content</h2></div>'})},1000)
})

使用Vue.component方法结合webpack的code-splitting来定义一个异步组件工厂函数：

Vue.component('async-component',function(resolve,reject){//这个特殊的require语法会告诉webpack自动将编译后的异步组件拆分成不同的块require('./AsyncComponent.vue',resolve)
})

在上面代码中，async-component是你定义异步组件的名字，后面的工厂函数有两个参数：resolve和reject。resolve是一个函数，异步加载成功时会调用它。reject则是在异步加载失败时调用。

2.Vue.component+动态导入+webpack 2的代码分割+ES2015的模块语法

Vue.component(`async-webpack-example`,()=>import('./my-async-component')
);

()=>import('./my-async-component')返回一个Promise，Vue会根据Promise的状态来自动处理异步加载和渲染的过程。

3.局部注册+动态导入

new Vue({components:{'my-component':()=>import('./my-async-component')}
})

处理加载状态

异步组件工厂函数可以返回一个对象，该对象包含有关异步组件加载、加载中、加载失败等情况的配置信息，这种方式允许你更加精细地控制异步组件地加载和渲染过程。下面是这种格式的异步组件配置对象的详细解释：

const AsyncComponent=()=({//需要加载的组件component:import('./MyComponent.vue'),//异步加载时使用的组件loading:LoadingComponent,//加载失败时使用的组件error:ErrorComponent,//展示加载时组件的延迟时间，默认值是200（毫秒）delay:200,// 如果提供了超时时间且组件加载也超时了，// 则使用加载失败时使用的组件。默认值是：`Infinity`，即没有超时限制timeout: 3000
})

Vue 2 动态组件和异步组件

相关文章：

Vue 2 动态组件和异步组件

MongoDB升级经历（4.0.23至5.0.19）

iPhone上的个人热点丢失了怎么办？如何修复iPhone上不见的个人热点？

AI 媒人：为什么图形神经网络比 MLP 更好？

信息学奥赛一本通 1984：【19CSPJ普及组】纪念品 | 洛谷 P5662 [CSP-J2019] 纪念品

JVM——JVM参数指南

马上七夕到了，用各种编程语言实现10种浪漫表白方式

Spring Clould 注册中心 - Eureka，Nacos

使用appuploader工具发布证书和描述性文件教程

【面试八股文】每日一题：谈谈你对IO的理解

200. 岛屿数量

【LeetCode】581.最短无序连续子数组

曲面（弧面、柱面）展平（拉直）瓶子标签识别ocr

知识继承概述

深度剖析数据在内存中的存储

【ARM Linux 系统稳定性分析入门及渐进10 -- GDB 初始化脚本介绍及使用】

AQS源码解读

QT实现天气预报

【马蹄集】第二十三周——进位制专题

[足式机器人]Part3 变分法Ch01-1 数学预备知识——【读书笔记】

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

前端倒计时误差!

23-Oracle 23 ai 区块链表（Blockchain Table）

基于Flask实现的医疗保险欺诈识别监测模型

大数据零基础学习day1之环境准备和大数据初步理解

【磁盘】每天掌握一个Linux命令 - iostat

工程地质软件市场：发展现状、趋势与策略建议

【git】把本地更改提交远程新分支feature_g

Python ROS2【机器人中间件框架】简介

【网络安全】开源系统getshell漏洞挖掘