uni-app - v-for 循环渲染多个 “重复“ 子组件(仅 ref 不同,this.$refs.xx 使用时依然能准确找到子组件)将子组件 ref 设为动态,这样每个子组件都是 “独立“ 的!
2023-09-11 14:15:54 时间
前言
我们会通过给组件绑定 ref 值,然后通过 this.$refs.xx 来获取这个组件上的方法和变量。
如果 在 v-for 中循环渲染组件(绑定固定 ref),那么这个 ref 就会 “一摸一样”,导致根本无法找到(this.$refs.xx 谁?),
要解决这个问题,就需要 动态绑定不一样的 ref 属性值,并且最终咱们的程序还能 “自动化” 找到它。
如下图所示,当点击父组件按钮时,调用子组件方法设置文本的效果,
子组件被 v-for 循环包裹渲染多个,由于每个子组件 ref 不同,所以它们都是 ”独立“ 的,
仅完成了核心功能,代码干净整洁注释详细
示例源码
推荐使用一键复制功能,随便找个新页面,直接运行起来查看效果。
相关文章
- 移动互联网App测试点
- Laravel中APP_KEY起什么作用
- Google Earth Engine APP(GEE)—设定中国区域的一个夜间灯光时序分析app
- Google Earth Engine APP——在线计算23类植被指数app代码
- Google Earth Engine(GEE)APP——一个监测影像各波段的DN值的app
- Vue - 修改富文本内元素样式,支持 scoped (自定义指令解析的富文本内图片、表格元素,即保留原有样式,又能加入额外自定义的样式详细教程)nuxt.js uni-app 微信小程序wechat
- uni-app - 文字上下循环滚动翻滚,类似中奖名单与公告栏信息公示等等,自定义组件封装,支持 DIY(适用于新闻动态、公告上下滚动列表、上下循环滚动,无限上下自动滚动列表)兼容小程序/H5/App
- uni-app - 新闻动态 / 公告上下滚动列表(上下循环滚动,无限上下自动滚动列表)
- uni-app - APP平台禁止页面滑动(无法上下滚动屏幕页面)
- create-html5-canvas-javascript-drawing-app
- PHP 开发 APP 接口 学习笔记与总结 - JSON 方式封装通信接口
- 《精通移动App测试实战:技术、工具和案例》一第2章 JUnit框架基础2.1 JUnit框架介绍
- iOS10 打开APP设置界面和WIFI界面
- 21个高质量的Swift开源iOS App
- IOS APP上架App Store及提交审核详细教程
- 如何分辨一个 App 是原生开发 还是Web开发,详细个人经验与总结