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

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

eval("that.$refs.tagItem" +(x+index))[0]

eval("that.$refs.topicRef" +(ele.bId))[0]

<p ref="p">Hello</p>
<children ref="children"></children>

this.$refs.p
this.$refs.children

<!-- ref 写在标签上时：this.$refs.名字  获取的是标签对应的dom元素
     ref 写在组件上时：这时候获取到的是 子组件（比如counter）的引用-->
    <div id="root">
        <!-- ref = 'hello'： 给div 起了一个引用的名字 hello -->
        <div
            ref = 'hello'
            @click = "handleClick">
            laugh yourself
        </div>
    </div>
 
    <script>
        var vm = new Vue({
            el: '#root',
            methods: {
                handleClick: function() {
                    //this.$refs : 获取整个Vue实例中所有的引用 然后再找到hello这个引用 指向div那个dom节点
                    //console.log(this.$refs.hello)
                    alert(this.$refs.hello.innerHTML)
                }
            }
        })
    </script>
 

<!-- ref 写在标签上时：this.$refs.名字  获取的是标签对应的dom元素
     ref 写在组件上时：这时候获取到的是 子组件（比如counter）的引用-->
    <div id="root">
        <!-- 子组件触发了事件 这里父组件(模板区里面)监听该事件 调用handleChange方法 
                                    因此handleChange方法定义在父组件的methods里面-->
        <counter ref="one" @change="handleChange"></counter>
 
        <counter ref="two" @change="handleChange"></counter>
        <div>{{total}}</div>
    </div>
 
    <script>
        Vue.component('counter', {
            template: '<div @click="handleClick"> {{number}} </div>',
            data: function() {
                return {
                    number: 0
                }
            },
            methods: {
                handleClick: function() {
                    this.number ++
                    //子组件向父组件传值  子组件被点击的时候 number+1  同时告诉外面 也即是触发一个事件
                    this.$emit('change')
                }
            },
        })
 
        var vm = new Vue({
            el: '#root',
            data: {
                total: 0
            },
            methods: {
                handleChange: function() {
                    //在此方法中计算两个数量的和  通过this.$refs.引用名字 获取两个子组件的引用
                    this.total = this.$refs.one.number +
                                    this.$refs.two.number
                }
            }
        })
    </script>
 

<template>
  <div>
    <div ref="myDiv" v-for="(item, index) in arr" :key="index">{{item}}</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      arr: ['one', 'two', 'three', 'four']
    }
  },
  mounted() {
    console.log(this.$refs.myDiv)
  },
  methods: {}
}
</script>
 
<style lang="sass" scoped>
 
</style>

<template>
    <div>{{msg}}</div>
</template>
 
<script>
export default {
  data() {
    return {
      msg: '我是子组件'
    }
  },
  methods: {
    changeMsg() {
      this.msg = '变身'
    }
  }
}
</script>
 
<style lang="sass" scoped></style>

<template>
  <div @click="parentMethod">
    <children ref="children"></children>
  </div>
</template>
 
<script>
import children from 'components/children.vue'
export default {
  components: { 
    children 
  },
  data() {
    return {}
  },
  methods: {
    parentMethod() {
      this.$refs.children  //返回一个对象
      this.$refs.children.changeMsg() // 调用children的changeMsg方法
    }
  }
}
</script>
 
<style lang="sass" scoped></style>