vue 在 v-for 中动态绑定 ref

首先想到如下方式，用数组下标做尾缀生成不同名字的 ref：

<swiper-item v-for="(item,index) in category" :key="index">
    <silverPage :ref="'silverPage' + index"></silverPage>
</swiper-item>

打印第3个引用对象的实例，你可能写成：

console.log(this.$refs['silverPage2']);
//或者
console.log(this.$refs.silverPage2);

但实际打印出来的是一个数组，且只有1个元素：

所以，正确的打印方式是：

console.log(this.$refs['silverPage2'][0]);
//或者
console.log(this.$refs.silverPage2[0]);

 

为什么变成数组了呢？

其实，在 vue 文档中关于 ref 的介绍有一句话：

……
当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。
……

原文档中没有给出示例，所以阅读的时候没留意，用下面的代码来理解。

现将前文中的代码改成如下：

<swiper-item v-for="(item,index) in category" :key="index">
    <silverPage ref="silverPage"></silverPage>
</swiper-item>

这样，通过  this.$refs.silverPage 获取到的就是一个数组，它的长度与 category 元素数量一致。

打印第3个引用对象的实例，就可以写成：

console.log(this.$refs.silverPage[2]);