位置: IT常识 - 正文
Vue - v-for 循环渲染多个 “重复“ 子组件（仅 ref 不同，this.$refs.xx 使用时依然能准确找到子组件）将子组件 ref 设为动态，这样每个子组件都是 “独立“ 的！详细教程(vue循环数组渲染列表)
编辑：rootadminVue - v-for 循环渲染多个 “重复“ 子组件（仅 ref 不同，this.$refs.xx 使用时依然能准确找到子组件）将子组件 ref 设为动态，这样每个子组件都是 “独立“ 的！详细教程 前言
本文链接地址:https://www.jiuchutong.com/zhishi/297425.html
转载请保留说明！
推荐整理分享Vue - v-for 循环渲染多个 “重复“ 子组件（仅 ref 不同，this.$refs.xx 使用时依然能准确找到子组件）将子组件 ref 设为动态，这样每个子组件都是 “独立“ 的！详细教程(vue循环数组渲染列表)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue循环数组渲染列表,vuefor循环的key,vue循环数组渲染列表,vue v-for循环对象,vue v-for循环对象,vue v-for循环对象,vue循环渲染,vue中for循环,内容如对您有帮助，希望把文章链接给更多的朋友！
本教程更多版本：uni-app | 微信小程序
我们会通过给组件绑定 ref 值，然后通过 this.$refs.xx 来获取这个组件上的方法和变量。
如果 在 v-for 中循环渲染组件（绑定固定 ref），那么这个 ref 就会 “一摸一样”，导致根本无法找到（this.$refs.xx 谁？），
要解决这个问题，就需要 动态绑定不一样的 ref 属性值，并且最终咱们的程序还能 “自动化” 找到它。
如下图所示，当点击父组件按钮时，调用子组件方法设置文本的效果，
子组件被 v-for 循环包裹渲染多个，由于每个子组件 ref 不同，所以它们都是 ”独立“ 的，
仅完成了核心功能，代码干净整洁注释详细
示例源码推荐使用一键复制功能，随便找个新页面，直接运行起来查看效果。
上一篇：手把手教你win10下安装Anaconda(手把手教你win7换主板不重装系统的方法)
下一篇：超分扩散模型 SR3 可以做图像去雨、去雾等恢复任务吗？(扩散分类)