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

Question

如题所述

Answer 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 ：