Vue - v-for 循环渲染多个 “重复“ 子组件（仅 ref 不同，this.$refs.xx 使用时依然能准确找到子组件）将子组件 ref 设为动态，这样每个子组件都是 “独立“ 的！详细教程

前言

本教程更多版本：uni-app | 微信小程序

在 vue2 / vue3 / nuxt项目中，列表 v-for 循环时动态设置 ref，并且获取 ref 时也是动态。

如果 在 v-for 中循环渲染组件（绑定固定 ref），那么这个 ref 就会 “一摸一样”，导致根本无法找到（this.$refs.xx 谁？），

要解决这个问题，就需要 动态绑定不一样的 ref 属性值，并且最终咱们的程序还能 “自动化” 找到它。

---

如下图所示，当点击父组件按钮时，调用子组件方法设置文本的效果，

子组件被 v-for 循环包裹渲染多个，由于每个子组件 ref 不同，所以它们都是 ”独立“ 的，

仅完成了核心功能，代码干净整洁注释详细

示例源码

推荐使用一键复制功能，随便找个新页面࿰