uni-app 组件放置在分包中 this.$refs 获取不到对象

uni-app 组件放置在分包中 this.$refs 获取不到对象

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

<template>  
<view>  
<tki-qrcode cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background"  
foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
loadMake="loadMake" :usingComponents="true" [@result](/user/result)="qrR" />
<view [@click](/user/click)="onClicked">点我</view>  
</view>
</template>  

<script>
import QrCode from '@/components/tki-qrcode/tki-qrcode.vue'

export default {  
    data() {  
        return {  
            val: '121212121221', // 要生成的二维码值  
            size: 500, // 二维码大小  
            unit: 'upx', // 单位  
            background: '#FFFFFF', // 背景色  
            foreground: '#000000', // 前景色  
            pdground: '#32dbc6', // 角标色  
            icon: '', // 二维码图标  
            iconsize: 40, // 二维码图标大小  
            lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行  
            onval: true, // val值变化时自动重新生成二维码  
            loadMake: true, // 组件加载完成后自动生成二维码  
            src: '', // 二维码生成后的图片地址或base64  
        };  
    },  
    components: {  
        QrCode  
    },  
    onLoad(options) {  
        this.$refs.qrcode._makeCode();  
    },  
    methods: {  
        onClicked() {  
            this.$refs.qrcode._makeCode();  
        },  
        qrR(res) {  
            console.log('qrR')  
            this.src = res  
        },  
    }  
}
</script>  

<style lang="scss">
</style>

更多关于uni-app 组件放置在分包中 this.$refs 获取不到对象的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这个问题，最后怎么解决的？我也遇到同样的问题了/

更多关于uni-app 组件放置在分包中 this.$refs 获取不到对象的实战教程也可以访问 https://www.itying.com/category-93-b0.html


同样的问题，没人知道什么原因吗

这是一个典型的分包组件引用问题。在uni-app中，当组件放置在分包内时，this.$refs在页面初始化阶段可能无法正确获取组件实例。

主要原因是分包组件的加载时机晚于主包页面。在onLoad生命周期中调用this.$refs.qrcode._makeCode()时，分包组件可能还未完成注册和挂载。

解决方案：

  1. 使用$nextTick延迟调用：
onLoad(options) {
    this.$nextTick(() => {
        this.$refs.qrcode._makeCode();
    });
}
  1. 在onReady生命周期中调用：
onReady() {
    this.$refs.qrcode._makeCode();
}
  1. 添加判空处理：
onClicked() {
    if (this.$refs.qrcode) {
        this.$refs.qrcode._makeCode();
    }
}
  1. 检查分包配置确保组件路径正确：
{
    "subPackages": [{
        "root": "subpackage",
        "pages": [...]
    }]
}
回到顶部