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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
详解vue项目打包步骤
Mar 29 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 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 缓存实现代码及详细注释
2010/05/16 PHP
php+highchats生成动态统计图
2014/05/21 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python登录豆瓣并发帖的方法
2015/07/08 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python第三方库学习笔记
2020/02/07 Python
python regex库实例用法总结
2021/01/03 Python
python 模块导入问题汇总
2021/02/01 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
思想品德自我鉴定
2013/10/12 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
高中运动会广播稿
2015/08/19 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript