ref值重复,如何获取对应标签或组件

1. 正常使用vue 的 ref属性时
   使用$refs获取返回的是一个对象,对象包含组件内部信息.(例如 method中方法,及data中数据)

       //gauge 组件内部定义了个方法fun;
       <gauge :dataSource="arr" ref="gauge"/>//组件

       this.$refs.gauge.fun();//通过$refs可以直接调用组件内部方法

2. 循环显示组件 ,导致ref ,重复,按照第一种方法调用会返回undefined,

           <div v-for="(item,index) in arr" :key="index">//多次循环
           
                 <gauge :dataSource="item" ref="gauge"/>//方法1
                 
                //<gauge :dataSource="item" :ref="`gauge${index}`"/> //方法2,ref值不重复
           </div>

           this.$refs.gauge.fun();//此时会报错,显示fun不是个函数
           console.log(this.$refs.gauge)//返回值为数组,length===arr.length
           this.$refs.gauge[0].fun();//调用第一个组件的内的方法
           
           // _this.$refs[`gauge${index}`][0].refreshDraw();//方法2