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 相关文章推荐
基于JQuery的多标签实现代码
Sep 19 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
微信小程序实现留言板
Oct 31 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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
session 的生命周期是多长
2006/10/09 PHP
第三节--定义一个类
2006/11/16 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
jsonp跨域请求详解
2017/07/13 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python实现控制台输入密码的方法
2015/05/29 Python
Python pandas常用函数详解
2018/02/07 Python
python和opencv实现抠图
2018/07/18 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
python能做哪些生活有趣的事情
2020/09/09 Python
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
公司董事长岗位职责
2014/06/08 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL