关于v-for搭配ref使用.

在 vue 中 v-for 是用来循环的(component or dom). ref 则用来使用引用的(component or dom)

<li v-for="counter in 5" :key='counter'>{{counter}}</li>

<component v-for="counter in 5" :key='counter'></component>

<button ref="abc">normalButton</button>

<component :ref="propertyBindComponent"></component>

这没什么大不了的.

v-for 循环呗,从后来取出来的 Array 数据肯定是需要用循环去遍历显示的. 不管它是一个复杂的组件还是单纯的 li

ref 引用呗. 你引用的是dom, 那么我就可以通过 this.$refs.abc 来获取这个按钮,然后就像操作普通 dom 元素那样该干嘛干嘛. 如果你引用的是一个 组件, 那么拿到的就是一个实例化好的 vue 组件对象. 里面的 methods, $data ... 该咋用咋用.

但是如果 v-for 和 ref 搭配在一起使用了呢???

---

单个vue-for 搭配 ref 使用

代码:

// 魔板代码
<ul>
      <li v-for="(obj,index) in list1" :key="index" :ref="index">{{obj}}</li>
</ul>

 data() {
    return {
      list1: ["a", "b", "c", "d"]
    };
  },

// 点击按钮进行循环


hanlderClick () {
    this.list1.forEach((obj,index,arr) => {
        console.log(this.$refs[index][0].innerText
    })
}

结果是:

a, b, c , d

乍看一看,觉得没什么,就是这样的.

仔细瞅瞅, this.$refs[index][0].innerText.

其中 index 是数组元素的索引,那么后面这个 [0] 是干嘛使用的?????

---

多个 v-for 搭配 ref

// 魔板代码
<ul>
      <li v-for="(obj,index) in list1" :key="index" :ref="index">{{obj}}</li>
</ul>

<ul>
      <li v-for="(obj,index) in list2" :key="index" :ref="index">{{obj}}</li>
</ul>

 data() {
    return {
      list1: ["a", "b", "c", "d"],
       list2: [1, 2, 3, 4],
    };
  },

// 点击按钮进行循环


hanlderClick () {
    this.list1.forEach((obj,index,arr) => {
        console.log(this.$refs[index][0].innerText
    })
}

在一个组件的模板代码中,有多个 v-for , 我想循环第二个数组的 dom 元素呢???

代码:

hanlderClick2 () {
    
    this.list2.forEach((obj,index,arr) => {
        console.log(this.$refs[index][1].innerText
    })

}

看一下规律:

1. 第一个数组的循环是 this.$refs[index][0].innerText
2. 第二个数组的循环是 this.$refs[index][1].innerText

区别在于第二个索引为 [0] & [1].

所以,结论就出来了.

在一个组件模板内多个 v-for 搭配 ref 的使用中,如果想获取指定的 ref.

首先,你要确定两个事件.

1. 当前元素在数组中的索引 . [index]
2. 当前元素在哪一个 v-for 中循环的 ? [0] or [1].

---

最后总结

在同一个组件的模板中, 当一个或者多个 v-for 搭配 ref 时.

想取出对应的 ref 指向的(dom or component)..

语法规则是: this.$refs[当前元素的索引][它是在第几个v-for中循环的] .

this.$refs[先元素索引][在v-for索引]它和你理解是是一个反的.