uniapp中refs获取打印是空对象{}的解决办法

场景复现

版本如下:

"@dcloudio/uni-app": "2.0.2-3080720230703001",

"vue": ">= 2.6.14 < 2.7",

开发中发现只要是view这些原始标签的ref都无法在任何地方获取到refs.xxx, 而组件标签如<myStep></myStep> 这种加ref就能获取到. 

解决办法

用如下代码平替this.refs, 标签中的ref改为id

 

获取实例js方法如下:

const item = this.createSelectorQuery().in(this).select("#item_0"); // 通过id获取实例
item.boundingClientRect((data) => { // 获取实例边界属性
        console.log(data)
}).exec();

写在最后

截止目前不知道为什么this.$refs打印一直是空对象, 给到组件的ref就能获取实例, 给到view标签的都不行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/4358.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【java】【基础1】数据类型运算符

目录 一、数据类型&#xff08;4大类8种&#xff09; 1.1类型转换 1、自动类型转换 2、表达式的自动类转换 3、强制类型转换 二、运算符 2.1基本算术运算符 2.2自增自减运算符 2.3赋值运算 2.4关系运算符 2.5逻辑运算符 2.6三元运算符 2.7运算符的优先级 三、API文档&am…

学习记录——SAM、SPM

Segment Anything Model&#xff08;SAM&#xff09; 能分割一切的模型 2023 SAM是一个提示型模型&#xff0c;其在1100万张图像上训练了超过10亿个掩码&#xff0c;实现了强大的零样本泛化。许多研究人员认为「这是 CV 的 GPT-3 时刻&#xff0c;因为 SAM 已经学会了物体是什…

F#奇妙游(14):F#实现WPF的绑定

WPF中的绑定 绑定在UI开发中是一个非常重要的概念&#xff0c;它可以让我们的UI界面和数据模型之间建立起联系&#xff0c;当数据模型发生变化时&#xff0c;UI界面也会随之变化&#xff0c;反之亦然。这样的好处是显而易见的&#xff0c;我们不需要手动去更新UI界面&#xff…

Unity 任意数据在Scene窗口Debug

任意数据在Scene窗口Debug &#x1f354;效果&#x1f96a;食用方法 &#x1f354;效果 如下所示可以很方便的把需要Debug的数据绘制到Scene中&#xff08;普通的Editor脚本只能够对MonoBehaviour进行Debug&#xff09; &#x1f96a;食用方法 &#x1f4a1;. 新建脚本继承Z…

目标检测算法:FPN思想解读

目标检测算法&#xff1a;FPN思想解读 说明 ​ FPN算法一种方法/思想&#xff0c;在许多的模型架构中都经常采用&#xff0c;也是提高模型精度的重要方法。 免责申明 ​ 有误写/错写/错误观点/错误解读&#xff0c;或者大家有其它见解&#xff0c;都可以在评论区指出&#xff0…

chatGPT指令大全可免费使用网站列表chatGPT4试用方案

指令列表 写作助理 &#x1f449; 最常使用的 prompt&#xff0c;用于优化文本的语法、清晰度和简洁度&#xff0c;提高可读性。作为一名中文写作改进助理&#xff0c;你的任务是改进所提供文本的拼写、语法、清晰、简洁和整体可读性&#xff0c;同时分解长句&#xff0c;减少…

手写代码系列

(1)手写clearfix .clearfix:after{content:; display:table;clear:both;} (2) 手写圣杯模型 (3)手写深拷贝 递归 const obj3={age:20,name:xxx,address:{} }, arr:[a,b,c] function deeepClone(obj={}){} (4)手写画图解释原型链(class的原型和本质)

grpc --- protoc生成的pb.go文件的位置

目录 一、环境相关版本二、go_package配置为当前目录下三、go_package配置为指定目录四、结论 一、环境相关版本 go v1.20.5 protoc v4.24.0 protoc-gen-go v1.26.0protoc-gen-go版本过高时需要指定包名&#xff0c;即go_package 二、go_package配置为…

13.postgresql--函数

文章目录 标量示例复合示例有返回值函数返回voidRETURN NEXT ,RETURN QUERYRETURN EXECUTEIF THEN END IFFOREACH,LOOPSLICE &#xff08;1&#xff09;如果函数返回一个标量类型&#xff0c;表达式结果将自动转行成函数的返回类型。但要返回一个复合&#xff08;行&#xff09…

Windows沙盒的安装与配置

沙盒安装 1、打开控制面板 2、选择程序与功能 3、勾选Windows 沙盒&#xff0c;然后点击确定&#xff0c;等待安装完成即可。 沙盒配置 Windows 沙盒支持简单的配置文件&#xff0c;这些文件为沙盒提供最少的自定义参数集。 此功能可与 Windows 10 内部版本 18342 或 Windows…

使用selenium模拟登录解决滑块验证问题

目录 1.登录入口 2.点击“账号密码登录” 3.输入账号、密码并点击登录 4.滑块验证过程 5.小结 本次主要是使用selenium模拟登录网页端的TX新闻&#xff0c;本来最开始是模拟请求的&#xff0c;但是某一天突然发现&#xff0c;部分账号需要经过滑块验证才能正常登录&#x…

python pytest脚本执行工具

pytest脚本执行工具 支持获取当前路径下所有.py脚本 添加多个脚本&#xff0c;一起执行 import tkinter as tk from tkinter import filedialog import subprocess import os from datetime import datetimedef select_script():script_path filedialog.askopenfilename(fil…

windows安装使用 tesseract-ocr

OCR&#xff08;Optical character recognition&#xff0c;光学字符识别&#xff09;是一种将图像中的手写字或者印刷文本转换为机器编码文本的技术。 tesseract-ocr 是由Google开发&#xff0c;支持100多种语言 文档 tessdoc&#xff1a; https://tesseract-ocr.github.io…

浅谈炼钢厂能源计量管理系统的设计与应用

安科瑞 华楠 摘要: 从能源计量和管理的角度&#xff0c;论述了炼钢厂的能源计量管理系统的基本组成及功能。该系统的建立&#xff0c;将使炼钢厂能源介质的计量管理工作实现自动采集、瞬时监测、故障报警、能流监视&#xff1b;完成报表统计、离线输入、成本分析、预测参考等功…

【Java项目实战-牛客社区】--idea创建springboot工程

①. 创建springboot工程&#xff0c;并勾选web开发相关依赖。 。配置Maven ②. 定义Controller类&#xff0c;添加方法 hello。 ③. 运行测试1 使用Spring Initializr方式构建Spring Boot项目 Spring Initializr是一个Web应用&#xff0c;它提供了一个基本的项目结构&#xff…

手机外壳缺陷视觉检测软硬件方案

单独使用一种光源效果图 同轴光会出现亮度不够的情况&#xff1b;回形面光因为光源中间的圆孔会使图像有阴影&#xff0c;造成图像效果不均衡&#xff0c;所以不采用单独光源打光 使用同轴回形面光源效果图 回形光源照亮产品要寻找的边缘&#xff0c;同轴光源起到补光的作用&a…

SpringCloud学习路线(6)—— 远程调用HTTP客户端Feign

一、Feign替代RestTemplate RestTemplate示例 String url "http://userservice/user/" order.getUserId(); User user restTemplate.getForObject(url, User.class);RestTemplate的缺陷&#xff1a; 代码可读性差&#xff0c;编码体验不统一。参数复杂URL难以维…

需求分析案例:全局错误码设计

本文介绍了我在一些业务系统中遇到的错误提示问题&#xff0c;以及进行需求分析和设计实现的过程&#xff0c;欢迎进行交流和指点&#xff0c;一起进步。 1、需求起源 作为程序员&#xff0c;或多或少&#xff0c;都经历过如下场景&#xff1a; 场景1&#xff1a; 产品经理&a…

智慧校园能源管控系统

智慧校园能源管控系统是一种搭载了物联网技术、大数据技术、大数据等技术性智能化能源管理方法系统&#xff0c;致力于为学校提供更高效、安全性、可信赖的能源供应管理和服务。该系统包括了校内的电力工程、水、气、暖等各类能源&#xff0c;根据对能源的实时检测、数据统计分…

文心一言 VS 讯飞星火 VS chatgpt (63)-- 算法导论6.5 2题

文心一言 VS 讯飞星火 VS chatgpt &#xff08;63&#xff09;-- 算法导论6.5 2题 二、试说明 MAX-HEAP-INSERT(A&#xff0c;10)在堆A(15&#xff0c;13&#xff0c;9&#xff0c;5&#xff0c;12&#xff0c;8&#xff0c;7&#xff0c;4&#xff0c;0&#xff0c;6&#xf…