我的编程空间,编程开发者的网络收藏夹
学习永远不晚

关于vue中ref的使用(this.$refs获取为undefined)

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

关于vue中ref的使用(this.$refs获取为undefined)

vue的ref(this.$refs获取为undefined)

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

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不是响应式的,所有的动态加载的模板更新它都无法相应的变化。

解决方案:

通过

setTimeout(() => {

    }, 0)

来得到数据

vue的$refs属性几个注意点

1.在vue中获取dom推荐使用$refs来获取

可是有时会出现 this.$refs.xxx 为undefined的情况。

场景1:在created()里使用

在这个生命周期中进行数据观测 ,属性和方法的运算,watch 事件回调。但是页面还没有挂载上去,没有e l 属 性 , t h i s . el 属性,this.el属性,this.refs无法调用dom。

解决办法:换成在mounted()里使用

场景2:父元素或当前元素使用了v-if或v-show

因为$refs不是响应式的,只在组件渲染完成后才会生效,在初始渲染的时候是不存在的。

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

解决办法:可以通过setTimeout(()=>{…}, 0)来实现。

2.如果使用v-for

遍历加ref时可以使用 :,即 :ref ="variable" ,这样得到的是不同的ref。

<div v-for="(item,index) in arr" :key="index">
  <child  :ref="`refName${index}`"/>
</div>
//this.$refs[`refName${index}`]每一项都是一个仅包含一个元素的数组
this.$refs[`refName${index}`][0].fun();//调用第一个组件内的方法

但是也可以不使用 :,这时得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。

<div v-for="(item,index) in arr" :key="index">
  <child  ref="refName"/>
</div>
//this.$refs.refName是一个包含了对应数据源的这些子组件的数组
this.$refs.refName[0].fun();//调用第一个组件内的方法

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

关于vue中ref的使用(this.$refs获取为undefined)

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue中this.$refs有值,但无法获取ref的值问题及解决

这篇文章主要介绍了vue中this.$refs有值,但无法获取ref的值问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-01-28

关于Vue中this.$set的正确使用

我们在项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性,我们该如何解决这个问题呢,下面小编给大家带来了Vue中this.$set的正确使用,感兴趣的朋友跟随小编一起看看吧
2022-12-09

vue怎么使用refs获取嵌套组件中的值

本文小编为大家详细介绍“vue怎么使用refs获取嵌套组件中的值”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么使用refs获取嵌套组件中的值”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。使用refs获
2023-06-29

web前端:关于Vue中,在方法中使用(操作)子组件获取到的数据

编程学习网:Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品,这是为了满足不同阶层的用户的需要:可以满足专业的制作工作室,同样也能满足3D自由艺术家。
web前端:关于Vue中,在方法中使用(操作)子组件获取到的数据
2024-04-23

编程热搜

目录