vue异步组件

使用Vue的异步组件有下面几种形式。

工厂函数

Vue.component('my-component' function(resolve, reject) {
    setTimeout( function() {
        resolve({
            template: `<div>hello world</div>`
        });
    }, 1000 );
} )

与webpack配合

Vue.component('my-component', function(resolve, reject){
    require(['./my-component'], resolve);
} );

工厂函数返回Promise

Vue.component('my-component', () => import('./my-component') );

工厂函数返回对象

Vue.component('my-component', () => ({
      // 需要加载的组件 (应该是一个 `Promise` 对象)
      component: import('./MyComponent.vue'),
      // 异步组件加载时使用的组件
      loading: LoadingComponent,
      // 加载失败时使用的组件
      error: ErrorComponent,
      // 展示加载时组件的延时时间。默认值是 200 (毫秒)
      delay: 200,
      // 如果提供了超时时间且组件加载也超时了，
      // 则使用加载失败时使用的组件。默认值是：`Infinity`
      timeout: 3000
}) );

直接使用

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