uni-app 字节小程序基础库2.0.1.0以上时 this.$refs 获取异常 为空对象

uni-app 字节小程序基础库2.0.1.0以上时 this.$refs 获取异常 为空对象

示例代码：

<template>  
    <view class="">  
        <coupon-list ref="couponlist" v-if="isFirstShow_0"></coupon-list>  
    </view>  
</template>  

<script>  
import {  
    mapState  
} from "vuex";  
export default {  
    data() {  
        return {  
            isFirstShow_0:false  
        };  
    },  

    mounted() {  
        this.isFirstShow_0 = true;  
        setTimeout(() =>{  
            this.$refs.couponlist.init();  
            this.$refs.couponlist.getList();  
        },2000)   
    },  

    methods: {  

    }  
};  
</script>

bug描述：

子组件上的ref无法正确获取

示例图片 示例图片

项目信息 详情
产品分类 uniapp/小程序/抖音
PC开发环境 Windows
操作系统版本 win10
HBuilderX类型 正式
HBuilderX版本 3.1.21
第三方工具版本 3.0.9
基础库版本 2.0.1.0以上
项目创建方式 HBuilderX

更多关于uni-app 字节小程序基础库2.0.1.0以上时 this.$refs 获取异常 为空对象的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

需要使setTiomeout 延迟一段时间就能获取到了

更多关于uni-app 字节小程序基础库2.0.1.0以上时 this.$refs 获取异常 为空对象的实战教程也可以访问 https://www.itying.com/category-93-b0.html


初步确认是在子组件上的v-if 导致的,把v-if删除在使用setTiomeout可以正常获取ref

在字节小程序基础库2.0.1.0及以上版本中，this.$refs获取异常的问题通常与组件的渲染时机和生命周期有关。从你的代码看，主要问题在于：

  1. 组件渲染异步性：通过v-if控制组件显示，虽然设置了setTimeout延迟，但字节小程序新版本可能对组件渲染机制做了调整，导致$refs在组件未完全挂载时被访问。

  2. 生命周期执行顺序：在mounted中立即修改isFirstShow_0为true并设置定时器，但子组件coupon-list的初始化可能需要更长时间，尤其在基础库升级后渲染流程可能更严格。

解决方案：

  • 使用$nextTick确保DOM更新后操作：
mounted() {
    this.isFirstShow_0 = true;
    this.$nextTick(() => {
        setTimeout(() => {
            if (this.$refs.couponlist) {
                this.$refs.couponlist.init();
                this.$refs.couponlist.getList();
            }
        }, 2000);
    });
}
回到顶部