在 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
})
}
看一下规律:
- 第一个数组的循环是
this.$refs[index][0].innerText - 第二个数组的循环是
this.$refs[index][1].innerText
区别在于第二个索引为 [0] & [1].
所以,结论就出来了.
在一个组件模板内多个 v-for 搭配 ref 的使用中,如果想获取指定的 ref.
首先,你要确定两个事件.
- 当前元素在数组中的索引 .
[index] - 当前元素在哪一个
v-for中循环的 ?[0]or[1].
最后总结
在同一个组件的模板中, 当一个或者多个 v-for 搭配 ref 时.
想取出对应的 ref 指向的(dom or component)..
语法规则是: this.$refs[当前元素的索引][它是在第几个v-for中循环的] .
this.$refs[先元素索引][在v-for索引]它和你理解是是一个反的.
