vue中的refs,vue ref获取元素

　　本文主要介绍ref在vue (this)中的使用。$refs获取为未定义)，有很好的参考价值，希望对你有帮助。如有错误或不足之处，请不吝赐教。

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

　　如果你得到的总是空的，请注意：

1.你在哪里调用，和你调用的对象

　　尝试在mounted()中调用，看看是否有效。

　　被调用的对象是已经存在的，还是只有在数据渲染后才会出现？同样，在mounted()中调用它来查看。

2.调用对象是不是数组列表

　　我一开始在v-for列表上设置ref，直接得到这个。$refs.name.style，它始终为空，

　　后来我发现这。$refs.name是一个数组，样式我过不去。风格。

　　你只能穿越这个这个这个。$refs.name数组，并在该数组上设置样式。$refs.name[index]

　　//6.14更新，这个说法有问题。

　　但是和高度、宽度一样，可以通过offsetHeight等获得。

3.调用对象是否和v-if结合使用

　　Ref没有响应，所有动态加载的模板都不能相应更新。

　　解决方案：

　　及格

　　setTimeout(()={

　　}, 0)

　　来获取数据。

vue的$refs属性几个注意点

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

　　但是有时候这个。$refs.xxx未定义。

　　场景1：在created()里使用

　　在这个生命周期中，进行数据观察、属性和方法的操作、手表事件的回调。但是页面还没有挂载，没有e l属性，t h i s. el属性，this.el属性，this.refs不能调用dom。

　　解决方案：在安装的()中使用它

　　场景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

　　//这个。$ refs [` refname $ {index }`]每个项目都是只有一个元素的数组。

　　这个。$refs[`refName${index}`][0]。fun()；//调用第一个组件中的方法

　　但是，没有必要使用：在这种情况下，获得的ref将是包含相应数据源的这些子组件的数组。

　　div v-for=(item，index) in arr :key=index

　　子ref=refName/

　　/div

　　//这个。$refs.refName是包含相应数据源的这些子组件的数组。

　　这个。$refs.refName[0]。fun()；//调用第一个组件中的方法

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。