【报Bug】父组件获取不到子组件插槽内的ref实例

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： Monterey 12.7。5

HBuilderX类型：正式

HBuilderX版本号： 4.15

第三方开发者工具版本号： 1.06

基础库版本号： 2.16.1

项目创建方式： HBuilderX

App下载地址或H5⽹址： https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbjxoMj5WVUXniYjmnKzvvJp7e3Z1ZVZlcnNpb259fTwvaDI+XG5cdDx0ZXN0YT5cblx0XHQ8aW5wdXQgcmVmPVwiaW5wdXRSZWZcIiBjbGFzcz1cImlucFwiIHR5cGU9XCJ0ZXh0XCIgLz5cblx0PC90ZXN0YT5cblx0PGJ1dHRvbiBAY2xpY2s9XCJpbnB1d

操作步骤：

见上方代码

预期结果：

获取ref

实际结果：

Proxy{}

bug描述：

父组件获取不到子组件插槽内的内容的ref。h5和小程序都不行。windows和macos环境都不行。线上代码运行正常，hbuildx编译后就不行了。
线上代码

代码：

<template>  
    <h2>VUE版本：{{vueVersion}}</h2>  
    <testa>  
        <input ref="inputRef" class="inp" type="text" />  
    </testa>  
    <button @click="inputFocus">点击聚焦</button>  
    <view class="">{{inputRef}}</view>  
</template>  

<script setup>  
    import {  
        ref,  
        nextTick,  
        version as vueVersion  
    } from 'vue'  
    const inputRef = ref();  
    const inputFocus = () => {  
        inputRef.value.focus();  
    }  
</script>  

<style>  
    .inp {  
        width: 100px;  
        height: 20px;  
        border: 1px solid salmon;  
    }  
</style>

2024-06-28 18:40 负责人:无分享

4 个回复

1***@qq.com

老哥解决了嘛

靐齉齾麤龖龗

你也是想要这样使input聚焦吗？

2024-10-23 12:08
1***@qq.com

我是获取不到自定义子组件了。inputRef.value 是null

2024-10-23 13:26
1***@qq.com

回复靐齉齾麤龖龗: h5可以获取到，放小程序里就不行

2024-10-23 13:27
靐齉齾麤龖龗

回复 1***@qq.com: 看看代码呢

2024-10-23 13:35
1***@qq.com

回复靐齉齾麤龖龗: <high-scroller :request="request" ref="scrollerRef">

let scrollerRef = ref(null)

onMounted(() => {

scrollerRef.value.reload()

})

报错reload is not a function , 这个 scrollerRef.value值是null

2024-10-23 13:37

1***@qq.com

<!-- <z-paging ref="paging" v-model="dataList" @query="request">  

    <view class="item" v-for="(item,index) in dataList" :key="index">  

      <view class="item-title">{{item.name}}</view>  

    </view>  

  </z-paging> -->

上面那个组件是封装了一层的，里面是这个组件z-paging,我直接使用z-paging是没有问题的，paging.value.complete(result.entityset)是可以执行的

2024-10-23 13:40

靐齉齾麤龖龗

回复 1***@qq.com: 。。。好吧，你可以在你封装的这个high-scroller加个方法reload，在里面在调用paging.value.reload()

2024-10-23 13:47

靐齉齾麤龖龗

回复靐齉齾麤龖龗:



<template>  



<z-paging ref="paging" v-model="dataList" @query="request">  



<view class="item" v-for="(item,index) in dataList" :key="index">  



<view class="item-title">{{ item.name }}</view>  



</view>  



</z-paging>  



</template>  



<script setup>  



import {ref} from 'vue'  



const request = ref()  



const dataList = ref([])  



const paging = ref()  



function reload() {  



paging.value.reload()  



}  



defineExpose({  



reload  



})  



</script>

2024-10-23 13:49

1***@qq.com

回复靐齉齾麤龖龗: 这个封装后的组件没有渲染出来，导致没有自动发第一次请求，所以在mounted里reload了一下，正常来说这是多余的操作....

2024-10-23 13:50
靐齉齾麤龖龗

回复靐齉齾麤龖龗: 也可以把paging 导出,defineExpose({

reload,

paging

}) ，在父组件就可以scrollerRef.value.paging.reload()

2024-10-23 13:51
1***@qq.com

回复 1***@qq.com: 回复靐齉齾麤龖龗: ref.value为null,也就是说拿不到组件实例,组件实例不存在或者没有渲染...

2024-10-23 13:53
靐齉齾麤龖龗

回复 1***@qq.com: 换成onReady呢

2024-10-23 13:56
1***@qq.com

回复靐齉齾麤龖龗: 但我连scrollerRef.value都拿不到...

2024-10-23 13:56
1***@qq.com

回复靐齉齾麤龖龗: 也报一样的错

2024-10-23 13:58
靐齉齾麤龖龗

回复 1***@qq.com: let scrollerRef = ref(null) 换成const scrollerRef = ref()试试

2024-10-23 14:02
1***@qq.com

回复靐齉齾麤龖龗: 是不是我组件定义的不对...我刚定义了一个组件也没有渲染出来,在F12里元素标签存在，但是高度宽度都是0..这是什么原因呢

2024-10-23 14:03
靐齉齾麤龖龗

回复 1***@qq.com: 出来还是你的组件名称吗？那应该是没找到组件吧。控制台有没有警告啥的

2024-10-23 14:05
1***@qq.com

回复靐齉齾麤龖龗: 没有其他报错(lll￢ω￢)，自定义组件的高宽都为0

2024-10-23 14:19
1***@qq.com

回复靐齉齾麤龖龗: 佬，发了个demo，可以看下

2024-10-23 15:00