l***@outlook.com
l***@outlook.com
  • 发布:2024-12-17 15:42
  • 更新:2024-12-17 15:42
  • 阅读:49

uniapp中通过.selectComponent 获取组件实例后在小程序中无法直接调用方法问题

分类:uni-app

最近在开发uniapp时使用uni-datetime-picker组件,需要在代码中获取组件实例进行调用组件的方法,在h5中通过$refs获取实例后便可直接调用方法.clear直接达成目的,但是在小程序中通过.selectComponent后却一直报错typeError: picker.clear is not a function

在网上查了半天也没人能说清楚这个问题后面在小程序调试中发现

在uniapp中.$refs和.selectComponent返回的结果和格式都不一样,当在小程序中需要获取组件实例时应该再加上$vm获取组件的方法实例 这样就可以直接.clear出方法了代码如下

const picker = this.getComponentInstance(this, '#report_picker');  
            if (picker) {  
              console.log(picker);  
              picker.clear(); // 调用clear方法清除选择状态  
 }
getComponentInstance(context, selector) {  
        const systemInfo = uni.getSystemInfoSync();  

        // 判断是否为小程序环境  
        if (systemInfo.uniPlatform === 'mp-weixin' || systemInfo.uniPlatform === 'mp-alipay' || systemInfo.uniPlatform === 'mp-baidu' || systemInfo.uniPlatform === 'mp-qq') {  
          // 小程序环境下使用 selectComponent  
          return context.selectComponent(selector).$vm;  
        } else {  
          // 其他平台(H5、App)使用 $refs  
          return context.$refs[selector];  
        }  
      }
0 关注 分享

要回复文章请先登录注册