Vue.js中ref ($refs)用法举例总结及应注意的坑

JavaScript010

Vue.js中ref ($refs)用法举例总结及应注意的坑,第1张

看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅。

HTML 部分

js部分

HTML部分

JS部分

HTML部分

JS部分

HTML部分

JS部分

1、如果通过v-for 遍历想加不同的ref时记得加 : 号,即 :ref =某变量

这点和其他属性一样,如果是固定值就不需要加 : 号,如果是变量记得加 : 号

2、通过 :ref =某变量 添加ref(即加了 : 号) ,如果想获取该ref时需要加 [0] ,如 this.$refs[refsArrayItem] [0] ;如果不是 :ref =某变量 的方式而是 ref =某字符串 时则不需要加,如 this.$refs[refsArrayItem]

3、想在element ui 对话框打开后取dom时,应该使用 $nextTick ,而不是直接使用 this.$refs. imgLocal2 :

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:

<!-- vm.$refs.p will be the DOM node -->

<p ref="p">hello</p>

<!-- vm.$refs.child will be the child comp instance -->

<child-comp ref="child"></child-comp>

当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

参考官网:网页链接