uniapp 小程序 this.$ref不可用

最新推荐文章于 2024-05-11 22:58:29 发布
最新推荐文章于 2024-05-11 22:58:29 发布
阅读量2k 收藏
点赞数
文章标签： 小程序 uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/emoji111111/article/details/129147602
版权

使用uniapp开发小程序时，获取元素的宽度和高度，使用this.$ref获取元素时，获取不到，报undefined,是因为小程序不支持操作DOM,查询uniapp的API文档发现，可以使用以下方法获取DOM，具体细节可以查看官网 https://uniapp.dcloud.net.cn/api/ui/nodes-info.html

 

emoji111111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
uniapp中this.$refs无效获取为空小程序$refs获取对象为空
mashangzhifu的博客
02-24 5940
在网上找了一圈，搜索关键词，小程序端不能使用vue的$refs么？在官网也搜了下都说是小程序本身就不支持操作dom，要获取dom信息请用uni.createSelectorQuery()这种。最后发现是我在页面最开始用v-if做了个判断，如果为空，整个页面不显示导致的，将v-if缓存v-show就行了。通过$refs,获取为空,该代码在onload中不行，等页面渲染完成后，通过点击的方式又能获取。
uniapp中在onload用this.$refs获取不到值
m0_72822997的博客
03-19 607
解决办法：在onReady中调用this.$refs。onReady页面初次渲染时触发，此时Dom已经渲染完成，因此this.$refs可以正确获取到Dom或组件的引用。原因：因为onload是在页面加载时触发，此时可能Dom还未完全渲染，因此this.$refs可能还无法正确获取到Dom或组件的引用。
uniapp使用vue3的ref获取dom元素出现undefined
12-14 1842
小程序中，uniapp的ref要绑定在子组件中才能被获取，如果绑定在view，是获取不了的，你得把业务写在一个组件来引用才行。h5则没有这种情况。
uni-app小程序开发踩过的坑之ref无法获取当前元素的宽高数据
m0_64207574的博客
11-13 2997
uni-app小程序开发踩过的坑之ref无法获取当前元素的宽高数据
记录uniapp无法获取$ref中的值
javaltt的博客
08-18 2491
记录uniapp无法获取$ref中的值
uniapp开发：“this.$refs.xxxx“调用子组件无效的可能原因
一名假人的博客
07-20 7422
"this.$refs.xxxx"调用子组件无效的可能原因 1. ref绑定的对象是否正确 <templete> <view ref="child"></view> </templete> <script> export default { onLoad(){ // 会报 "child is undefined" 的问题 console.log(this.$refs.child) } } </script>
uni-app开发中 this.$refs 用不了
热门推荐
m0_50015961的博客
01-04 2万+
"this.$refs.xxxx"调用子组件无效的可能原因 1. ref绑定的对象是否正确 <templete> <view ref="child"></view> </templete> <script> export default { onLoad(){ // 会报 "child is undefined" 的问题 console.log(this.$refs.child) } } </script>
关于uni-app使用v-for绑定动态ref后无法获取的解决办法
温壁
12-10 2551
上述代码的打印结果为一个空对象，即表示并没有获取到动态的ref元素，但如果我们将动态的ref改成静态写死的ref，又能够获取得到，所以我们可以排除是兼容性的问题，而考虑是界面元素渲染的时间问题，我们可以加上一个延迟获取。此时我们能够正确获取到所有的ref元素，得出结论就是，元素渲染需要时间，我们必须得等它渲染完成后才能进行获取ref，否则将获取不到，至于延迟多少，看自己的业务情况，这里只是给出问题所在及对应的解决方法。
uniapp 微信小程序 获取refs是空对象
weixin_44179923的博客
01-07 9310
除 加载时机问题。（大前提，DOM加载完成后之类的 排除） this.$refs 在微信小程序上获取到 {} 目前发现是微信小程序调试基础库导致的。 打开微信小程序文档更新日志 第三条更新。 修复 框架 virtualHost 的组件节点无法被 selectComponent 和 getRelationNodes 选中 解决方案就是把基础库调到2.19.2及以上。 ...
vue uniapp ref动态更改dom样式 （微信小程序里面 获取dom ，ref微信小程序用不了）
YUlangML的博客
05-28 1326
【代码】vue uniapp ref动态更改dom样式 （微信小程序里面 获取dom ，ref微信小程序用不了）
Vue 解决通过this.$refs来获取DOM或者组件报错问题
11-20
如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素 <p ref=”p”>hello <!– this.$refs.p 指向该DOM元素 –> 如果ref属性加在组件上，那么this.$refs.name指向该组件实例 <child ref=”child”...
vue.js中ref及$refs的使用方法解析
10-16
主要介绍了vue.js中ref及$refs的使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue列表单项展开收缩功能之this.$refs的详解
12-29
展开效果–看红框区域 ...###template部分：已去除与本文不相关的功能代码 <li class=main-videov-for key=item.id> <span class=img-l-num>{{index+1}} <span class=img-l-name>{{item.subName}}</span>
uniapp中使用ref无法获取子组件的方法
flyf123的博客
03-09 1407
因为v-if的判断导致当前组件不存在，也不会去寻找它的ref。解决办法 去掉search组件上的v-if的判断。希望本篇文章对大家有所帮助，仅供参考！
uniapp中开发小程序使用ref获取dom实例，一直显示undefined，竟然发现是这个原因！
柑橘乌云_
04-15 1万+
uniapp使用ref获取dom实例是undefined，ref获取不到dom实例
uniapp + vue3.2 用ref获取DOM元素一直为null
weixin_43552533的博客
06-06 2121
uniapp + vue3.2 开发小程序 用ref获取DOM元素一直为null。有人遇到同款问题并已解决的看到捞一下我…
产业项目招商活动会议课程报名签到h5小程序pc开源版开发
weixin_44039884的博客
05-08 349
会员体系，多种VIP模式，用户申请成为会员，用户付费成为会员(开发中高级专项)，用户消费升级会员等级(开发中高级专项)。项目模块，会员在线报名，报名后查看指定信息、项目内容、项目文件(pdf,word,img,video) 、对接人。分销功能(开发中)，会员成为代理商后，可邀请用户成为下级，代理商获取佣金，通过分销模式让用户裂变式增长。项目节点，每个项目支持项目节点录入，项目对接人，项目信息，项目文件，项目状态。活动模块，会员报名活动后，可查看指定信息，活动地点、活动内容。
uniapp管理后台编写，基于uniadmin和vue3实现uniapp小程序的管理后台
最新发布
编程小石头
05-11 965
打开开发者工具Hbuilder,然后点击左上角的文件，点新建，点项目。如下图。选择uniadmin，编写项目名，然后使用vue3记得选用阿里云服务器，因为最便宜点击创建，等待项目创建。
uniapp this.$refs. 介绍
09-03
uniapp中的this.$refs是一个用于访问组件或元素的引用的对象。通过在组件或元素上添加ref属性，我们可以在this.$refs对象中访问到该组件或元素的引用。 使用this.$refs可以实现一些操作，例如： 1. 访问组件的方法和属性：如果在组件中定义了一些方法或属性，可以使用this.$refs来调用它们。例如，如果某个组件有一个名为"myComponent"的ref属性，我们可以使用this.$refs.myComponent来访问该组件的方法和属性。 2. 访问DOM元素：如果在某个元素上添加了ref属性，可以使用this.$refs来访问该DOM元素。例如，如果某个元素有一个名为"myElement"的ref属性，我们可以使用this.$refs.myElement来访问该DOM元素。 需要注意的是，this.$refs是一个对象，其属性名对应着ref属性的值。因此，在访问组件或元素引用时，需要使用对应的属性名。 请注意，这是我自己开发的 AI，并不与OpenAI公司开发的ChatGPT有任何关系。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值