Vue-$refs的基本用法

$refs的基本用法

1：ref属性 加在普通元素上，用 this.refs.(ref值) 获取到的是dom元素

2：ref属性加在子组件上，用 this.refs.(ref值) 获取到的是组件实例 ，可以使用组件的所有方法 。

在使用方法的时候直接 this.refs.(ref值) 获取到的是组件实例，可以使用组件的所有方法。

在使用方法的时候直接 this.refs.(ref值) .(方法名称) 就可以使用了

3：如何利用v-for 和 ref 获取元素（dom节点 、组件实例）组成的数组
应注意的坑：
ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

Vue的极大程度的帮助减少了对dom的操作，其中获取元素的方式主要通过添加ref属性，但是当获取this.$refs属性时，稍有不注意就会输出undefined导致我们对dom节点的操作报错。this.$refs.xxx为undefined的几种情况记录：

1. 在created里钩子函数中调用

   原因：created（）在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。所以this.$refs压根就调不到那个dom，因为页面还没有挂载上去。

   解决：在mounted () 钩子函数中调用

   注意：在此种情况中，元素节点一定是直接写在html中的，而不是通过数据或者条件渲染的

2. 数据或条件渲染（v-if,v-show）之后的调用

   $ref本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的

   $refs不是响应式的，只在组件渲染完成后才填充

   用于元素或子组件注册引用信息，注册完成，将会注册在父组件$refs对象上

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

   ref不是响应式的，所有的动态加载的模板更新它都无法相应的变化。

   解决：可以通过setTimeOut(()=>{...}, 0)来实现

• ref的作用是只在当前的vue组件中有效，所以使用ref来获取dom元素，节省了dom的操作又可以实现多个重复组件中的区分，所以获取元素的时候用ref不要直接使用document.getElementById来操作；二者获取到的值是一样的，用ref获取到DOM元素以后还是可以使用document的方法。

• ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上；如果在子组件上，引用就指向组件实例

• $refs 是所有注册过的ref的一个集合

• 而$refs相对document.getElementById的方法，会减少获取dom节点的消耗

• 如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref = "某变量 "; 这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号

搜索

复制