vue中ref的使用问题怎么解决

本文小编为大家详细介绍“vue中ref的使用问题怎么解决”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue中ref的使用问题怎么解决”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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();//调用第一个组件内的方法

读到这里，这篇“vue中ref的使用问题怎么解决”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。