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

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

目前的思路是把defineAsyncComponent包装一层，获取import后的promise就行。

import { defineAsyncComponent,defineComponent } from "vue";
/** * 创建一个异步组件* 方便之后能知道该组件是否下载完成*/function createAsyncComponent(fn){//注意使用的时候 promise需要返回原本的reslet 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;
});

vue3异步组件怎么获取ref，获取组件实例？曲线救国的方式。相关推荐

Vue3.x 父组件Setup、Ref操纵子组件中的元素方法
目录父组件方法一: defineComponent 方法二: setup语法糖小伙伴们在开箱Vue3的过程中一点会踩到不少坑. 比如很多小伙伴想要通过ref来操纵DOM,可偏偏翻车. 这里分享两 ...
Vue3和element plus 中ref用法元素实例操作
在 vue3 中,组件的逻辑可以放在 setup 函数里面,但是 setup 中不再有 this,所以 vue2 中的 this.$refs 的用法在 vue3 中无法使用. 用法是: element ...
vue3 的组件通信以及ref的使用v-model
一. 组件通信 1. props=>父向子传值 props主要用于父组件向子组件通信.在父组件中通过用 :msg="msg" 绑定需要传给子组件的属性值,然后再在子组件中用 ...
vue3没了$children，如何获取子组件？？？
vue3没了$children,如何获取子组件??? $children 移除概览 $children 实例 property 已从 Vue 3.0 中移除,不再支持. 2.x 语法在 2.x 中 ...
利用ref获取遍历出的元素或者组件，ref，：ref
获取v-for遍历的元素定义一个空数组,接收所有的LI 定义一个函数,往空数组push DOM 在循环的dom上,或者组件上使用:ref绑定这个函数 <template><div ...
vue 子级拿值_Vue 父组件主动获取子组件的值，子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header" 2. 在父组件中通过this.$refs.header.属性,调用子组件的属性 ...
vue3中实现放大镜效果，使用ref获取节点元素
效果如下: 首先,有一个放大镜的DOM结构 <template><div class="spec-preview"> ...
【Android 安全】DEX 加密 ( Application 替换 | 分析 ContentProvider 组件中调用 getApplication() 获取的 Application )
文章目录一. ContentProvider 创建过程分析二. ActivityThread 中的 H 处理 BIND_APPLICATION 消息三. ActivityThread 中的 ha ...
pyqt 获取 UI 中组件_你想知道的React组件设计模式这里都有(上)
本文梳理了容器与展示组件.高阶组件.render props这三类React组件设计模式往期回顾:HBaseCon Asia 2019 Track 3 概要回顾随着 React 的发展,各种组件设 ...

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

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

vue3异步组件怎么获取ref，获取组件实例？曲线救国的方式。相关推荐

最新文章

热门文章