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

18 篇文章 1 订阅
14 篇文章 0 订阅
翻看文档实在没找到异步组件加载成功后的回调,获取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;
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值