vue - 动态绑定ref(使用变量)以及获取方式，解决v-for循环嵌套自定义子组件时无法this.$refs.xx找到动态组件的情况（详细示例教程）适合 vue.js nuxt.js uniapp

已于 2025-01-16 15:31:01 修改
阅读量7.3k 收藏 5
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 前端组件与功能(开箱即用) 文章标签： vue.js uni-app nuxt.js 前端 动态绑定ref
于 2023-02-21 23:00:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50545213/article/details/129152092
本文介绍了在Vue中如何动态绑定ref，并在v-for循环中解决无法通过this.$refs找到特定子组件的问题。通过示例代码详细展示了在遇到v-for双层嵌套循环时，如何利用动态id避免ref重复，以及如何在父组件中正确调用每个独立的子组件方法。

介绍

正常情况，我们需要在vue中获得某个dom或者组件，我们会通过绑定 ref 然后通过绑定后的名字来获取这个dom 。

但是，如果我们在v-for中绑定ref的话，那么这个ref就会存在多个，比如我们点击事件让对应的显示/隐藏的话，我们很难找到这个对应的元素。

那么，这时我们需要动态绑定不一样的ref（比如 Arr1、Arr2、Arr3这种），那么我们如何实现呢？

实现代码

注释详细，一眼就能看出如何解决这个问题。

以下示例无依赖，可直接在 vue 环境中运行查看。

页面：

<templa
了解本专栏 订阅专栏 解锁全文
Vue3 - v-for 循环渲染多个 “重复“ 子组件（仅 ref 不同，ref.value.xx 使用时依然能准确找到子组件并调用其方法）将子组件 ref 设为动态，这样每个子组件都是独立的实例！
🏆 前端领域优质创作者
12-11 1万+
vue3，vue3动态refs，vue3组件如何让ref是动态的并且能调用对应方法，vue3给动态渲染的组件添加ref，vue3自定义组件的ref变成动态后如何调用，vue3组件ref怎么是变量，vue3组件的refs如何绑定变量，循环数组v-for中使用refs，Vue3父组件循环使用refs调用子组件方法，Vue3ref和v-for结合，vue3循环动态设置ref并获取ref.value方式，vue3中ref的使用(v-for组件内使用ref)，vue3循环渲染子组件，vue3如何让组件的ref变成动
vue组件的v-for循环中动态绑定ref
line233的博客
11-26 6205
在vue组件的v-for循环中是无法动态绑定ref的，若强行绑定，当访问的时候会出现 undefined 的结果，但这不是说没有解决方法，在循环中写:ref="xxx"，循环结束后，实际生成的是一个ref数组，当取循环中某一元素的ref时，使用下标即可，见下例： <!-- template --> <li v-for="(list, index) in tagList" :k...
Vue3-TypeScript：动态属性绑定ref / 实现组件接收参数作为 ref 的值
snow的博客
09-25 298
本文介绍了Vue3中ref的使用方法，通过一个动态组件示例展示了如何用ref获取子组件实例。子组件m-list采用动态渲染方式，根据配置映射不同组件类型，并通过ref回调函数收集表单实例。父组件通过ref获取子组件实例并调用其validate方法进行表单验证。文章详细说明了组件间通信、动态属性绑定和事件处理机制，包括类型定义、模块配置接口和事件数据传递等关键实现。该方案适用于需要动态生成和验证复杂表单的场景。
Vue中ref的绑定与获取(静态、动态)
热门推荐
BellaShang的博客
04-14 1万+
ref用在v-for内部时通过this.$refs.name获得的为一个数组，可知ref不同于id唯一标识，可以对同类型的dom采用相同的命名，通过vfor的下标获得具体指向的dom元素 对不同的dom设置了有规律的ref,如ref='area1',ref='area2'，可以通过ES6中的模板字符串``获取，字符串中的变量采用${}
vue3中使用ref动态绑定组件
qq_42931285的博客
07-02 1285
vue3中使用ref动态绑定组件
Vue中动态绑定Ref（两种方式）
weixin_45935553的博客
07-09 6007
项目中ref绑定是常用的操作，那么如何实现动态绑定ref并实现动态获取呢？动态绑定的进阶写法又该如何使用？动态绑定Ref时重复存储Ref问题如何解决？用户动态创建多个空白表单，提交时需要获取当前所有表单数据该如何操作？
vue3组件ref属性用法，动态绑定ref
hongkid的专栏
05-14 3309
其实ref属性可以是个函数，(el)=>{},这样想怎样存储ref就可以怎样存储。注：el是就是vue实例，赋值后访问的时候无需xx.value。如果我们需要在代码里面动态绑定ref，如果处理？
vue 动态ref绑定方法
qq_64211393的博客
07-07 2154
vue3动态组件ref 绑定方式。vue2 动态ref绑定方式。
vue中ref的动态绑定与获取
djh052900的博客
03-24 4885
在v-for循环中绑定ref,使用时获取某个具体的dom
vue3中如何获取dom节点，不能用this.$refs
我的博客
03-23 3592
下面提供了两个方法可以获取节点。
vue中的ref和$refs的使用
01-21
ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。 ref 有三种用法： 1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素 2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 普通的DOM元素上使用 <input type=textref=TEXT/ > <button @click=add>
vue3 的组件通信以及ref的使用&v-model
汉堡请不要欺负面条
07-05 1万+
vue3 组件通信以及ref的使用
elementUI中el-form-item的prop如何绑定多个变量，el-form-item使用两个prop，this.$refs[formName].resetFields()重置时间框
坏蛋阿土的博客
10-05 4969
想要清空表单数据，可以使用**this.$refs[‘form’].resetFields()**方法。然后就可以使用this.$refs[‘form’].resetFields()重置这连个表单项了。但是清空这个日期的时候只有一个el-form-item可以进行数据双向绑定。而且要清空的表单项要满足以下形式才能使用resetFields()那么这时候就不要一个prop绑定多个变量了，思路不对。也就是一定要有prop 和 v-model。每个el-col下面再。
UniApp + Vue3 使用 uni-popup 报错Cannot read property ‘$refs‘ of undefined的解决方法
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-07 1381
以上就是在 UniApp + Vue3 中正确使用 uni-popup的方法。遇到类似问题时，记得检查是否使用了 Vue3 的正确语法。修复后的代码既符合 Vue3 的使用规范，又能避免报错，让开发更高效！希望本文对你有所帮助！如果还有其他问题，欢迎在评论区交流~ 😊✨。
vue中使用v-for动态的绑定ref
m0_68937827的博客
10-11 2120
动态绑定ref
【vue 动态组件ref 绑定方式】
m0_75202016的博客
07-07 1143
vue3动态组件ref 绑定方式。vue2 动态ref绑定方式。
Vue2 --动态绑定class、过滤器参数、$ref、自定义指令、计算属性与监听器
weixin_51972964的博客
12-15 1386
v-bind动态绑定class <div :class='['default-class',{'active-class':isActive}]'> </div> <div :class='{'active-class':isActive}' data(){ return{ isActive:true } } 过滤器-filter参数 过滤器默认有一个实参,即管道符前面的数值,如果需要传参,则设多个形参,实参从第二个形参开始 <div>{{ text
vue实战指南 vue中动态添加ref
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-11 1482
希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。是Vue提供的一种特殊的属性，用于在模板中注册引用信息。，我们可以在父组件中直接操作子组件的方法和属性，或者对DOM元素进行直接操作。是一个非常有用的功能，它可以用来获取DOM元素或子组件的实例引用。在某些情况下，我们可能需要在组件的生命周期钩子中动态添加。动态添加到子组件中，以便在父组件中调用子组件的方法。在按钮点击时，调用选中的子组件的方法。方法，确保在组件更新后高亮选中的列表项。
vue2中的this.$refs获取组件方法，在vue3+ts中应该怎么写
最新发布
09-30
在 Vue 2 中，使用 `this.$refs` 可以方便地获取子组件实例并调用其方法。而在 Vue 3 + TypeScript 中，由于组合式 API 的引入，获取组件方法的方式有所不同。 在 Vue 3 + TypeScript 里，若要获取组件方法，可借助 `ref` 和 `defineComponent` 等组合式 API。以下是具体示例： 父组件： ```vue <template> <div> <ChildComponent ref="childRef" /> <button @click="callChildMethod">调用子组件方法</button> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default defineComponent({ components: { ChildComponent }, setup() { const childRef = ref<InstanceType<typeof ChildComponent> | null>(null); const callChildMethod = () => { if (childRef.value) { childRef.value.childMethod(); } }; return { childRef, callChildMethod }; } }); </script> ``` 子组件： ```vue <template> <div>子组件</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ methods: { childMethod() { console.log('子组件方法被调用'); } } }); </script> ``` 在上述代码中，父组件利用 `ref` 创建了一个引用变量 `childRef`，并将其绑定到子组件上。在 `setup` 函数里，可通过 `childRef.value` 访问子组件实例，进而调用子组件的方法。同时，为了避免类型错误，使用 `InstanceType<typeof ChildComponent>` 明确了 `childRef` 的类型。 若使用 `this.$refs` 时遇到类型提示问题，可对 `$refs` 进行类型扩展。示例如下： ```vue <script lang="ts"> import Vue from 'vue'; import Component from 'vue-class-component'; @Component export default class InputFocus extends Vue { // annotate refs type. // The symbol `!` (definite assignment assertion) // is needed to get rid of compilation error. $refs!: { input: HTMLInputElement }; mounted() { // Use `input` ref without type cast. this.$refs.input.focus(); } } </script> ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蓝猫叫十一

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值