在组件引用中我们有时会用到异步组件。这里简单介绍下异步组件的配置与使用
// 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)