Skip to main content

vue 中 ref($refs)用法和作用

ref 有三种用法: 1、ref 加在普通元素上,用 this.$refs.name 获取到的是 dom 元素

2、ref 加在子组件上,用 this.$refs.name   获取到的是组件实例,可以使用组件的所有方法。

3、如何利用 v-for 和 ref 获取一组数组或者 dom 节点

注意:

1、ref 需要在 dom 渲染完成后才会有,在使用的时候确保 dom 已经渲染完成。比如在生命周期  mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。

2、如果 ref 是通过 v-for 循环出来的,有多个重名,那么 ref 的值会是一个数组  ,此时要拿到单个的 ref 只需要循环就可以了。

image.png

image.png