vue 循环动态设置ref并获取$refs

vue 循环动态设置ref并获取$refs

1. 关于ref的使用和场景请看官网文档
2. 下面是我对循环设置ref并获取使用的一些办法，简单记录一下

一. 使用理解步骤（个人理解、大白话概况）

1. 单循或双循环标签使用,无论那种都要**保证ref唯一**
   例如：可以在ref值后面附带id或不会重复的索引
2. 针对上述唯一的ref进行获取
   获取：单循环可以直接用$refs获取非单循环可以通过eval(）获取

二. 单循环和无循环动态设置ref

1. 设置 【ref=“xxx”】【ref="‘xxx’+index"】
   就不多说了 简单

三. 双循环动态设置ref

3. 设置【:ref="‘xxx’+id"】或【:ref="‘xxx’+index"】

   <div v-for="(item,index) in topicList" :key="index">
         <el-carousel-item v-for="(son,i) in item.questionList" :key="index+i">
              <topic :ref="'topicRef'+son.bId"></topic>
              //或也可以用索引.  用一个索引会重复，如下
              //<topic :ref="'topicRef'+(i+index)"></topic>
         </el-carousel-item>
   </div>
   

   3. 获取

   		eval("that.$refs.tagItem" +(x+index))[0]
   		或
   		eval("that.$refs.topicRef" +(ele.bId))[0]