vue v-for获取子组件$ref总是拿到最后一个元素

页面循环列表,把子组件放在循环里面,此处获取this.$refs返回的应该是个数组,但是不知道为什么,一直返回的是循环的最后一个的子组件实列,官网上已经说明v-for返回的就是数组,所以一直很困惑

代码如下:大佬们可以帮忙看看有啥问题,打印出来一直最后一个的子组件实列(返回的是对象)

复制代码
 <li class="list" 
     v-for="(item, index) in dataList"
     :key="item.id">
        {{ item.name }}
       <child :ref="child" :key="item.id"></child>
</li>
  methods: {
    getChild() {
       console.log(this.$ref.child)
    }
  }

暂时解决方案

复制代码
 <li class="list" 
     v-for="(item, index) in dataList"
     :key="item.id">
        {{ item.name }}
       <child :ref="(el) => childRef(el, index)" :key="item.id"></child>
</li>
  methods: {
   childRef(el, index) {
      if (el) {
        this.childArr[index] = el;
      }
    },
    getChild() {
       console.log(this.childArr)
    }
  }
相关推荐
Cassie燁18 小时前
el-button源码解读1——为什么组件最外层套的是Vue内置组件Component
前端·vue.js
vx_bscxy32218 小时前
告别毕设焦虑!Python 爬虫 + Java 系统 + 数据大屏,含详细开发文档 基于web的图书管理系统74010 (上万套实战教程,赠送源码)
java·前端·课程设计
北极糊的狐18 小时前
Vue3 子组件修改父组件传递的对象并同步的方法汇总
前端·javascript·vue.js
spionbo18 小时前
Vue3 前端分页功能实现的技术方案及应用实例解析
前端
Zyx200718 小时前
JavaScript 作用域与闭包(下):闭包如何让变量“长生不老”
javascript
AI绘画小3318 小时前
Web 安全核心真相:别太相信任何人!40 个漏洞挖掘实战清单,直接套用!
前端·数据库·测试工具·安全·web安全·网络安全·黑客
7***n7518 小时前
前端设计模式详解
前端·设计模式·状态模式
u***j32418 小时前
JavaScript在Node.js中的进程管理
开发语言·javascript·node.js
用户479492835691518 小时前
Vite 中 SVG 404 的幕后黑手:你真的懂静态资源处理吗?
前端·vite
用户479492835691518 小时前
javascript新进展你关注了吗:TC39 东京会议带来五大新特性
javascript