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 相关文章推荐
DOM 基本方法
Jul 18 Javascript
chrome原生方法之数组
Nov 30 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
一个可复用的vue分页组件
May 15 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
PHP学习笔记之二
2011/01/17 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python中用Spark模块的使用教程
2015/04/13 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
python实现kMeans算法
2017/12/21 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Python 元组操作总结
2019/09/18 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
社团2014年植树节活动总结
2014/03/11 职场文书
给学校的建议书范文
2014/05/15 职场文书
移交协议书
2014/08/19 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
创业计划书之宠物店
2019/09/19 职场文书