除了博客外内容均来自网上,如有问题请联系站长及时删除。QQ:2978968560
蜀ICP备19040930号
川公网安备 51010702001708号
始于2019年12月的这次旅行,还未曾看到终点!
目前的思路是把defineAsyncComponent包装一层,获取import后的promise就行。
import { defineAsyncComponent,defineComponent } from "vue";
/**
* 创建一个异步组件
* 方便之后能知道该组件是否下载完成
*/
function createAsyncComponent(fn){
//注意使用的时候 promise需要返回原本的res
let component_ = undefined;
function componentFn(){
if(component_) return component_;
const component = fn();
component_ = component;
return component;
}
const component = defineAsyncComponent(componentFn);
return {
component:component,
componentFn:componentFn,
};
}
const asyncComponent = createAsyncComponent(()=>{
return import("@/views/research/asyncComponent");
});
export default defineComponent({
name: 'Component',
components: {
asyncComponent:asyncComponent.component,
},
setup() {
asyncComponent.componentFn().finally(()=>{
console.log("组件已经引入!(不代表已经渲染)");
});
},
});
如果在使用组件前提前调用且是 .then() 调用的话,需要原封不动的把组件模块数据返回出去,像这样:
componentFn().then((res)=>{
console.log("组件已经引入!(不代表已经渲染)");
return res;
});