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

原创于 2022-03-23 13:50:47 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

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)