vue里ref ($refs)用法

最新推荐文章于 2025-07-14 00:11:30 发布

转载最新推荐文章于 2025-07-14 00:11:30 发布 · 673 阅读

Vue 专栏收录该内容

40 篇文章

订阅专栏

博客介绍了ref的三种用法，包括加在普通元素上获取dom元素、加在子组件上获取组件实例，以及利用v-for和ref获取数组或dom节点。同时提醒ref需在dom渲染完成后使用，若ref循环重名，其值为数组，可通过循环获取单个ref。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　ref 有三种用法：

　　1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

　　2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

　　注意：

　　1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

　　2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

一、ref使用在外面的组件上

<div id="ref-outside-component" v-on:click="consoleRef">
    <component-father ref="outsideComponentRef">
    </component-father>
    <p>ref在外面的组件上

二、ref作用在外面元素上
//ref在外面的元素上
<div id="ref-outside-dom" v-on:click="consoleRef" >
   <component-father>
   </component-father>
   <p ref="outsideDomRef">ref在外面的元素上</p>
</div>

        }
    });

三、ref使用在里面的元素上--局部注册组件

//ref在里面的元素上
<div id="ref-inside-dom">
    <component-father>
    </component-father>
    <p>ref在里面的元素上</p>
</div>

四、ref使用在里面的元素上--全局注册组件

//ref在里面的元素上--全局注册
<div id="ref-inside-dom-all">
    <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</div>