Vue 解决通过this.$refs来获取DOM或者组件报错问题


Posted in Javascript onJuly 28, 2020

1.关于this.$refs的使用场景

如果ref属性加在普通元素上,那么this.$refs.name则指向该DOM元素

<p ref="p">hello</p>

<!-- this.$refs.p 指向该DOM元素 -->

如果ref属性加在组件上,那么this.$refs.name指向该组件实例

<child-component ref="child"></child-component>

<!-- this.$refs.child 指向该组件 -->

2.为什么有时候通过this.$refs.name来获取会报错?

一个比较常见的场景:在一个弹窗打开的时候立刻通过this.$refs来获取内容就会出现xxx is undefined的错误

因为ref本身是作为渲染结果被创建的,在渲染的时候是不能访问的,因为他们还不存在!

如果此时代码是需要这样来写代码,那么你可以在DOM渲染完毕后再进行获取

this.$nextTick(() => {
 this.$refs.name... //DOM渲染完毕后就能正常获取了
})

补充知识:vue ref用法(this.$refs获取为空)

//6.14更新

但是有个办法,我们可以使用

this.$nextTick(() => {
  // todo
})
 
setTimeout(() => {
  // todo
}, 0)

来得到数据

ref

本身作为渲染结果被创建,在初始渲染的时候不能访问他们,是不存在的

$refs不是响应式的,只在组件渲染完成后才填充

用于元素或子组件注册引用信息,注册完成,将会注册在父组件$refs对象上

如果你获取到的总是空的,你注意一下:

1、你在哪里调用,和你调用的对象

试试在mounted()里面调用有效果没有

调用的对象是本来就存在的,还是需要数据渲染之后才会出现的,同理,在mounted()里面调用看看

2、调用对象是不是数组列表

我一开始设置ref在v-for列表上,直接获取this.$refs.name.style,永远是空的,

后来才发现,this.$refs.name是一个数组,无法通过 .style 获取样式,

只能遍历这个this.$refs.name数组,在this.$refs.name[index]上设置样式

// 6.14 更新,这个说法有点问题

但是像高度宽度,可以通过offsetHeight,等来获取。

3、调用对象是否和v-if结合使用

ref不是响应式的,所有的动态加载的模板更新它都无法相应的变化。

最后

在使用中,我发现$refs.style只能设置该对象的样式,获取出来的值都是空的

以上这篇Vue 解决通过this.$refs来获取DOM或者组件报错问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript静态的url如何传递
May 03 Javascript
判断iframe是否加载完成的完美方法
Jan 07 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
JS代码简洁方式之函数方法详解
Jul 28 #Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 #Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 #Javascript
js实现全选和全不选
Jul 28 #Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 #Javascript
js实现全选和全不选功能
Jul 28 #Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 #Javascript
You might like
php模拟js函数unescape的函数代码
2012/10/20 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
php自定义时间转换函数示例
2016/12/07 PHP
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
Python类的继承和多态代码详解
2017/12/27 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python ORM编程基础示例
2020/02/02 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
你们项目是如何进行变更控制的
2015/08/26 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
高职教师岗位职责
2013/12/24 职场文书
《春笋》教学反思
2014/04/15 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
党员证明模板
2015/06/19 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python