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

2023-11-19

小程序是不能使用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则没有这种情况。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • android.accessibilityservice包介绍

    android accessibilityservice 英文原文 http developer android com reference android accessibilityservice package summary html
  • Ant Design Pro 修改主题设置

    Ant Design Pro 修改主题设置 主题是在项目根目录下的config defaultSettings js文件下内所定义的其中导出的Settings对象中即为默认的主题等配置 如下图 const Settings navTheme
  • Vue2项目使用高德地图

    目录 一 账号准备 1 注册账号 2 获取key 二 快速上手 1 安装 2 创建地图 3 点标记 4 海量点标记 5 简易行政区图 6 GeoJSON 三 绑定事件 总结 一 账号准备 1 注册账号 首先 注册开发者账号 成为高德开放平台
  • 高德地图加渐变色3D线段

    想用高德地图实现渐变色的边界效果 查看了很多资料 测试了很多方法 终于实现啦 记录一下 1 按照高德官方示例创建地图 var map new AMap Map container pitch 75 地图俯仰角度 有效范围 0 度 83 度
  • python基础练习--《人力资源管理员工管理》

    python新手入门练习 运用python的基础数据结构编写 人力资源管理员工管理 初学python 入门练习 留些记录 方便以后查看 如有错误 请诸位大神指点 谢谢 需求分析 要求使用python的最基础的数据结构 字典 元组 列表 字符
  • [系统安全] 四十六.恶意软件分析 (2)静态分析Capa经典工具批量提取静态特征和ATT&CK技战术

    终于忙完初稿 开心地写一篇博客 您可能之前看到过我写的类似文章 为什么还要重复撰写呢 只是想更好地帮助初学者了解病毒逆向分析和系统安全 更加成体系且不破坏之前的系列 因此 我重新开设了这个专栏 准备系统整理和深入学习系统安全 逆向分析和恶意
  • JS 实现一键复制(复制DIV)

    话不多说 直接上代码 JS部分 function copyDivContent divId 获取标签内容 const div document getElementById divId 创建文档区域 const range document
  • 计算机硬件系统结构主要分为什么五大组成,硬件系统的五大组成部分

    大家好 我是时间财富网智能客服时间君 上述问题将由我为大家进行解答 以计算机为例 硬件系统的五大组成部分别为 储存器 控制器 运算器 输入设备 输出设备 计算机硬件 Computer hardware 是指计算机系统中由电子 机械和光电元件
  • 面试题流散汇总

    1 n位数全排列 大字符串相加 SQL HTTPS 根据简历来问 2 MapReduce和Spark的主要区别在于 MapReduce使用持久存储 而Spark使用弹性分布式数据集 RDDS Spark之所以如此快速 原因在于它在内存中处理
  • python爬取链家二手房信息并存储到数据库

    爬取链家的二手房信息 存储到数据库方便以后查看 文章目录 页面分析 引入库 方法编写 主函数编写 运行结果 页面分析 分析页面后发现是前后端未分离的状态 所以需要使用xpath分析界面元素 在li中存放着对应的div 有相关的信息 分析请求
  • Android 接入穿山甲SDK之开屏广告

    大家可以先参考我的上一篇博客介绍了如何集成SDK以及一些工具类传送门 首先创建一个脚本写入如下内容 package com unity3d player chuanshanjia import android app Activity im
  • RabbitMQ教程-重要参数&&API解释

    RabbitMQ的工作原理 下图是RabbitMQ的基本结构 生产者发送消息流程 1 生产者和Broker建立TCP连接 2 生产者和Broker建立通道 3 生产者通过通道消息发送给Broker 由Exchange将消息进行转发 4 Ex
  • MFC中如何将Menu资源添加到主对话框中

    还是写个博客备忘吧 自己这个脑子哦 在主对话框 Dlg cpp中 找到OnInitDialog 这个函数 在 TODO 在此添加额外的初始化代码 下面 添加这样的三行代码 TODO 在此添加额外的初始化代码 CMenu m Menu m M
  • 召唤神龙打造自己的ChatGPT

    在之前的两篇文章中 我介绍了GPT 1和2的模型 并分别用Tensorflow和Pytorch来实现了模型的训练 具体可以见以下文章链接 1 基于Tensorflow来重现GPT v1模型 gzroy的博客 CSDN博客 2 花费7元训练自
  • 硬件系统工程师宝典(30)-----降压式Buck电路分析

    各位同学大家好 欢迎继续做客电子工程学习圈 今天我们继续来讲这本书 硬件系统工程师宝典 上篇我们说到DC DC变换中的开关调节模式有功耗小 效率高并且稳压范围宽的特点以及DC DC的指标参数和设计要求 今天我们来分析一下DC DC中的一个典
  • Flutter flutter.minSdkVersion的实际文件位置

    Flutter 项目的Android相关版本号配置 flutter minSdkVersion 的版本号配置文件实际路径 flutter sdk packages flutter tools gradle src main groovy f
  • 总结:linux笔记-004

    一 Linux network详解 1 linux中网路相关的主要的几个配置文件 etc hosts 配置主机名 域名 和IP地址的对应 etc sysconfig network 配置主机名和网关 etc sysconfig networ
  • 【服务器基础资源巡检,含常用命令解析】

    在工作中经常去搜这些命令解析 于是整理了一下供大家参考 一 内存占用 二 磁盘占用 三 CPU占用 一 内存占用 使用free指令会显示内存的使用情况 包括实体内存 虚拟的交换文件内存 共享内存区段 以及系统核心使用的缓冲区等 参数如下 b
  • Vue 3第三章:模板语法及指令介绍

    文章目录 1 插值表达式 1 1 声明变量可直接在模板中使用 采用 变量名称 的方式 1 2 模板语法支持三元表达式 1 3 模板语法支持运算 1 4 模板语法支持方法调用 2 指令 2 1 v bind 用于绑定属性或动态绑定对象的值到元
  • uniapp中开发小程序使用ref获取dom实例,一直显示undefined,竟然发现是这个原因!

    小程序是不能使用getElementById之类的dom api 所以考虑使用ref来获取dom元素 但事实上并不是如此 绑定ref后并没有输出我想要的dom元素 既然console log this refs iRef 为undefine