uniapp中开发小程序使用ref获取dom实例,一直显示undefined,竟然发现是这个原因!,Uniapp中ref获取dom实例失败,竟因这个原因揭秘!

马肤

温馨提示:这篇文章已超过422天没有更新,请注意相关的内容是否还可用!

在uniapp开发小程序时,使用ref获取dom实例出现undefined的问题,原因竟在于细节之处。开发者在尝试通过ref引用DOM元素时,可能会因为某些配置错误或者生命周期问题导致无法正确获取实例。经过深入排查,发现问题的根源可能与组件的加载顺序、生命周期钩子的使用不当等有关。通过调整代码逻辑或检查相关配置,成功解决了这一问题。

程序是不能使用getElementById之类的dom api,所以考虑使用ref来获取dom元素,但事实上并不是如此,绑定ref后并没有输出我想要的dom元素。

uniapp中开发小程序使用ref获取dom实例,一直显示undefined,竟然发现是这个原因!,Uniapp中ref获取dom实例失败,竟因这个原因揭秘! 第1张
(图片来源网络,侵删)

既然console.log(this.$refs.iRef)为undefined,会不会this.$refs也是undefined?然而this.$refs是有值的,就是没有iRef,那么到底是为什么?

会不会是需要延迟获取,dom还没有生成?见此,我设置了2秒定时器并放在mounted中执行,结果:然并卵,还是undefined。

uniapp中开发小程序使用ref获取dom实例,一直显示undefined,竟然发现是这个原因!,Uniapp中ref获取dom实例失败,竟因这个原因揭秘! 第2张
(图片来源网络,侵删)

我浏览了一下vue官网对ref的说明,明白了出问题的原因,这里引用vue官网的说法:

关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

解释:如果你该ref绑定的元素不是当前页面的元素,也就是当前页面调用的某个子组件,那么在mounted中是不能通过$refs来访问的,可以通过this.$nextTick()来访问它,而且得放在methods里面。

我尝试着去用this.$nextTick()来获取该元素,但是依旧是undefined。最后,我想起来我这个是uniapp项目,会不会和uniapp有关?

最终结论

小程序中,uniapp的ref要绑定在子组件中才能被获取,如果绑定在view,是获取不了的,你得把业务写在一个组件来引用才行。

h5则没有这种情况。


0
收藏0
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

  • 【研发日记】Matlab/Simulink自动生成代码(二)——五种选择结构实现方法,Matlab/Simulink自动生成代码的五种选择结构实现方法(二),Matlab/Simulink自动生成代码的五种选择结构实现方法详解(二)
  • 超级好用的C++实用库之跨平台实用方法,跨平台实用方法的C++实用库超好用指南,C++跨平台实用库使用指南,超好用实用方法集合,C++跨平台实用库超好用指南,方法与技巧集合
  • 【动态规划】斐波那契数列模型(C++),斐波那契数列模型(C++实现与动态规划解析),斐波那契数列模型解析与C++实现(动态规划)
  • 【C++】,string类底层的模拟实现,C++中string类的模拟底层实现探究
  • uniapp 小程序实现微信授权登录(前端和后端),Uniapp小程序实现微信授权登录全流程(前端后端全攻略),Uniapp小程序微信授权登录全流程攻略,前端后端全指南
  • Vue脚手架的安装(保姆级教程),Vue脚手架保姆级安装教程,Vue脚手架保姆级安装指南,Vue脚手架保姆级安装指南,从零开始教你如何安装Vue脚手架
  • 如何在树莓派 Raspberry Pi中本地部署一个web站点并实现无公网IP远程访问,树莓派上本地部署Web站点及无公网IP远程访问指南,树莓派部署Web站点及无公网IP远程访问指南,本地部署与远程访问实践,树莓派部署Web站点及无公网IP远程访问实践指南,树莓派部署Web站点及无公网IP远程访问实践指南,本地部署与远程访问详解,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南。
  • vue2技术栈实现AI问答机器人功能(流式与非流式两种接口方法),Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法探究,Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法详解
  • 发表评论

    快捷回复:表情:
    评论列表 (暂无评论,0人围观)

    还没有评论,来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码