TAipSNarE

23朵毒蘑菇

vue3异步组件怎么获取ref,获取组件实例?曲线救国的方式。

原文章迁移

vue

2022-10-12 13:48:12 已有版本 1 个 show:0.63kTYPE: blog

翻看文档实在没找到异步组件加载成功后的回调,获取ref写个setTimeout延迟个一两秒可以,万一网速慢就GG,所以还是得明确的知道这个组件什么时候下载引入成功的。

目前的思路是把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;
});