全文总结(可以不看下面的分析)

问题:父组件无法通过ref获取子组件defineExpose的属性.

背景:声明和暴露都写全了,在vue3 setup代码块中,子组件有手动defineExpose暴露,并且该页面其他的子组件可以获取到ref值,就这个写在popup中的组件拿不到。

解决:在popup添加:lazyRender=“false” 的属性,让弹窗未点开时就把子组件加载好,这样ref才有值。

问题描述

能获取到ref属性值的代码如下:

1.直接<xxx></xxx>调用子组件的方式
<BPickerSearch  ref="refDeviceNum"  v-show="DeviceName.show">
</BPickerSearch >

2.在popup中的以<component></component>t形式通过is属性动态调用的方式。
<van-popup  @open="reloadPopupList" :style="ChooseUserPopup2.style" :lazyRender="ChooseUserPopup2.lazyRender" v-model:show="ChooseUserPopup2.show">
        <component :style="component5472.style" ref="chooseCheckUserRef" :pgnum=UnitOrgNum.value.value||user.personInfor.PgNum  :is="chooseCheckUser" v-show="component5472.show" @clickUser="getUserInfo">
        </component> 
</van-popup>

上面的refDeviceNum、chooseCheckUserRef都能拿到对应的属性值,也能在value中看到子组件向外暴露的方法。
在这里插入图片描述
ref拿到value为null的如下:

 <van-popup v-model:show="show" position="bottom"  :style="{ height: '70%' }">
        <LocationTree  ref="LocationTreeRef"   @comfirmLocpopup="comfirmLocpopup" v-show="LocationTree712.show" >
        </LocationTree>   
 </van-popup>

排查过程

1.排查了并非变量声明和暴露不规范的问题。
2.把LocationTree组件移到popup外面ref的value就有值了,以为是和不同调用子组件导致的,但是换了也不行。
3.以为是popup打开前后popup子组件未加载,所以特意把LocationTreeRef输出放在了弹窗show之后,但仍未能解决。
4.发现第三步思路是对的,解决方案错了,正确的是把popup的lazy-render设置为false,让弹窗未点开时就把子组件加载好,这样ref就有值了。
在这里插入图片描述

解决方案

最终代码应修改如下:

 <van-popup v-model:show="show"  position="bottom"  :style="{ height: '70%' }">
        <LocationTree  ref="LocationTreeRef" :lazyRender="false"   @comfirmLocpopup="comfirmLocpopup" v-show="LocationTree712.show" >
        </LocationTree>   
 </van-popup>

更多推荐