将多个延迟加载的vue组件子项导入父项

// 父组件
<template>
  <div>
    <button @click="loadComponents">加载组件</button>
    <div v-if="componentsLoaded">
      <ChildComponent1 />
      <ChildComponent2 />
      <ChildComponent3 />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentsLoaded: false
    };
  },
  methods: {
    loadComponents() {
      Promise.all([
        import('./ChildComponent1.vue'),
        import('./ChildComponent2.vue'),
        import('./ChildComponent3.vue')
      ]).then(([ChildComponent1, ChildComponent2, ChildComponent3]) => {
        // 导入成功后，将组件注册到父组件中
        this.$options.components.ChildComponent1 = ChildComponent1.default;
        this.$options.components.ChildComponent2 = ChildComponent2.default;
        this.$options.components.ChildComponent3 = ChildComponent3.default;
        this.componentsLoaded = true;
      });
    }
  }
};
</script>