vue中异步组件的使用与配置说明

最新推荐文章于 2025-06-14 14:54:56 发布

inticaler

最新推荐文章于 2025-06-14 14:54:56 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/MICHAEL_PRINCE/article/details/123684311

vue.js 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了Vue.js中如何配置和使用异步组件，包括基本的Promise异步加载和高级异步组件的设置，如加载状态显示、延迟与超时控制等，帮助开发者提升应用的加载效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在组件引用中我们有时会用到异步组件。这里简单介绍下异步组件的配置与使用

// Promise 异步组件
Vue.component(
  'async-webpack-example',
  // `import` 函数返回一个 Promise.
  () => import('./my-async-component')
)
 
// 高级异步组件
const AsyncComponent = () => ({
  // 加载组件（最终应该返回一个 Promise）
  component: import('./MyComponent.vue'),
  // 异步组件加载中(loading)，展示为此组件
  loading: LoadingComponent,
  // 加载失败，展示为此组件
  error: ErrorComponent,
  // 展示 loading 组件之前的延迟时间。默认：200ms。
  delay: 200,
  // 如果提供 timeout，并且加载用时超过此 timeout，
  // 则展示错误组件。默认：Infinity。
  timeout: 3000
})
Vue.component('async-component', AsyncComponent)