vue3中jsx函数组件如何异步加载

Question

普通的.vue文件直接可以利用defineAsyncComponent()异步，但对jsx函数组件失效

import { defineAsyncComponent } from 'vue';
//.vue组件正常
const load = defineAsyncComponent(() => import('./components/load/index.vue'));

//jsx函数组件不显示
const loading = defineAsyncComponent(() => import('@/components/loading'));

请问jsx函数组件如何使用defineAsyncComponent()呢

Answer 1

JSX组件
1.默认暴露可以直接
const loading = defineAsyncComponent(() => import('@/components/loading'));
2.分别暴露的情况下需要特殊处理 （分别暴露，可以在一个文件中写多个jsx组件）
const loading = defineAsyncComponent(() => import('@/components/loading').then(({ loading }) => loading));