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

这篇具有很好参考价值的文章主要介绍了uniapp中开发小程序使用ref获取dom实例,一直显示undefined,竟然发现是这个原因!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

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

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

最终结论

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

h5则没有这种情况。文章来源地址https://www.toymoban.com/news/detail-505902.html

到了这里,关于uniapp中开发小程序使用ref获取dom实例,一直显示undefined,竟然发现是这个原因!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue2第十二章】ref和$refs获取dom元素 和 vue异步更新与$nextTick使用

    为什么会有 ref 和 $refs? 因为在vue页面中使用dom查找元素,不管你是不是在子组件里面查找,查找的都是整个页面的元素,如果你想查找单独组件里面的元素是不容易实现的,除非把每个组件的class写成独一无二,但是在日常开发中,一个vue页面不知道会有多少组件,所以出

    2024年02月09日
    浏览(26)
  • uniapp中this.$refs无效获取为空小程序$refs获取对象为空

    在小程序里通过this.$refs的方式获取自定义组件: 通过$refs,获取为空,该代码在onload中不行,等页面渲染完成后,通过点击的方式又能获取 在网上找了一圈,搜索,小程序端不能使用vue的$refs么?在官网也搜了下都说是小程序本身就不支持操作dom,要获取dom信息请用uni

    2024年02月11日
    浏览(24)
  • 29 - ref 和 $refs 获取dom和组件

    作用: 利用 ref  和 $refs 可以用于 获取 dom 元素 , 或 组件实例 特点: 查找范围 - 当前组件内(更精确稳定) 1. 获取 dom:         (1). 目标标签 - 添加 ref属性         (2). 恰当时机,通过this.$refs.xxx,获取目标标签         代码示例:   2. 获取组件         (1). 目标组件 - 添加 r

    2024年02月11日
    浏览(28)
  • React 中的 ref 如何操作 dom节点,使输入框获取焦点

    .focus() 获取焦点 当用户点击按钮时, handleClick 函数会被调用,从而将焦点聚焦到文本输入框上。 定义一个名为 handleClick 的函数。当按钮被点击时,这个函数会被调用。在函数内部,我们通过 inputRef.current 获取到 inputRef 引用所指向的 DOM 元素,并调用其 focus 方法,将焦点聚

    2024年02月09日
    浏览(30)
  • el-table里面存在固定列获取video的ref的时候无法获取原始DOM

    这是通过ref获取的dom实例,却变成了fixed固定出现了表格里面的video的实例 我现在的需求是修改里面的currentTime,但是获取的是固定列的video的ref,修改了,原始video也不会有任何变化 创造一个变量控制fixed的固定列变化 当video里面的 @loadedmetadata=\\\"setInitialTime\\\"修改完数据,再变

    2024年01月19日
    浏览(27)
  • 【uniapp开发小程序】点击获取手机号(使用@getphonenumber)

    一、实现效果 二、代码实现:

    2024年02月11日
    浏览(31)
  • Vue获取子组件实例对象 ref 属性

    在 Vue 中推荐使用 ref 属性获取 DOM 元素,这种方式可以提高性能。 如果将 ref 属性使用在组件上,那么返回的就是这个组件的实例对象。 使用方式:`p ref=\\\"xxx\\\"` 或 `Banner ref=\\\"xxx\\\"` 。 获取方式:this.$refs.xxx 1.原生 JS 获取 DOM 元素 【不推荐】: 2. 通过 ref 属性获取 DOM 元素 【推荐

    2024年02月04日
    浏览(33)
  • React 18 使用 ref 操作 DOM

    参考文章 由于 React 会自动处理更新 DOM 以匹配渲染输出,因此在组件中通常不需要操作 DOM。但是,有时可能需要访问由 React 管理的 DOM 元素 —— 例如,让一个节点获得焦点、滚动它或测量它的尺寸和位置。在 React 中没有内置的方法来做这些事情,所以需要一个指向 DOM 节点

    2024年02月10日
    浏览(27)
  • uniapp获取dom某个元素

    uniapp中想要获取dom元素不能像pc端那样获取 虽然dom元素是获取到了,但不同于pc端那样,获取到的元素属性和方法少很多:  只有这么几个属性,click点击方法都没有,可能是考虑到多端适配的问题

    2024年02月13日
    浏览(29)
  • react通过ref获取函数子组件实例方法

    在react16之后带来了hooks之后,确实方便了很多组件开发,也加快了函数式编程的速度,但是当你通过useRef获取子组件的时候,又恰好子组件是一个函数组件,那么将会报一个错误:报这个错误的主要原因是函数组件没有实例对象,所以你没办法通过ref获取子组件实例  Warnin

    2024年02月11日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包