vue的ref ($refs)的用法介绍

最新推荐文章于 2022-06-17 18:53:17 发布
最新推荐文章于 2022-06-17 18:53:17 发布
阅读量444 收藏
点赞数
分类专栏： 前端 # 功能用法 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pgzero/article/details/114364193
版权

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 只需要循环就可以了

pgzero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
深入理解vue $refs的基本用法
08-29
本文主要介绍了Vue $refs的基本用法，包括如何使用 $refs、其优点和应用场景。通过使用 $refs，可以减少获取DOM节点的消耗，提高应用程序的性能。同时，$refs还可以实现组件之间的通信和数据的双向绑定，提高应用...
vue中的ref和$refs的使用
01-21
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 普通的DOM元素上使用 <input type=textref=TEXT/ > <...
Vue 2中ref属性的使用方法及注意事项
12-29
发现问题 最近写东西遇到了莫名其妙的问题，用ref属性原以为它会获得一个数组 // html <ul> 　　<li ref=refCon>1</li> 　　<li ref=refCon>2</li> </ul> // js created: function() { 　　this.$nextTick(() => { 　　　　console.log(this.$refs.refCon) 　　　　// 打印结果：<li>2</li> 本以为会获得一个数组 　　 }) } 后来去看了下文档才搞明白orz。（没仔细看文档的锅 正确使用方法 这下就明白了 // html <ul> <li
vue中ref的使用
热门推荐
qq_52372296的博客
04-01 7万+
ref是vue中DOM元素和组件标签中的属性
Vue中ref的用法
Mr_xiaoxuboke的博客
06-17 1万+
1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素 　　2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。 最后代码的效果就是x、y各点一次加1，最后实现x+y=z的效果 3、ref可以调用组件中的方法...
Vue中ref的使用
微光的博客
05-20 900
在jq时代，我们首要任务就是学习选择的使用，因为选择可以极其方便帮助我们获取节点查找dom，因为我们要通过dom展示处理数据。而在Vue中，我们的编程理念发生了变化，变为了数据驱动dom；但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点； <body> <div id="app"> <inp...
Vue里ref($refs)的用法
张木期的博客
10-14 1万+
在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现，本文我们就来详细的介绍下这个内容 ref    ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。 $refs       $refs是一个对象，持有已注册过 ref的所有的子组件。 详细可看此篇文章比较通俗易懂 Vue教程(ref和$refs的使用)
Vue中$refs的用法详解
08-27
下面我们将详细介绍$refs的用法和应用场景。 一、什么是$refs？ $refs是一个对象，它持有已注册过ref的所有子组件（或HTML元素）。在模板中，我们可以通过添加ref属性来标识某个元素或组件，然后在JavaScript中...
vue.js中ref及$refs的使用方法解析
10-16
主要介绍了vue.js中ref及$refs的使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
在Vue.js框架中，$refs, $emit, $on, $once, 和 $off 是用于组件间通信的重要机制。下面将分别对它们进行详细的解释和示例说明。 1. **$refs** `$refs` 是 Vue 提供的一种机制，允许父组件引用其子组件实例。在...
vue中ref的用法
weixin_45455635的博客
06-23 1万+
vue中ref的用法 vue给我们提供一个操作dom的属性ref。绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用： <div ref="test">test</div> console.log(this.$refs.test) 后台打印结果： 看到打印出来就是绑定的dom对象，可以用来执行一些dom操作，比如操作样式，获取属性等： let testDom = this.$refs.test testDom.style.height = '200px' t
vue 中的 ref 的用法
m0_58893670的博客
02-24 720
1、基础用法：获取页面dom元素 <template> <div id="app"> <div ref="text">div盒子</div> <button @click="btn">获取div内容</button> </div> </template> <script> export default { methods: { btn() { co
vue中ref属性的用法
ct5211314的博客
04-20 6537
一、ref属性简介 被用来给元素或子组件注册引用信息（ID的替代者） 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc） 用法： 1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>``` 2. 获取：```this.$refs.xxx``` 二、通过ref实现事件的触发以及数据的更改（更改子组件数据） ...
vue ref用法
瑾年
12-17 526
vue的ref理解vue中ref的功能是十分强大的1 、直接获取dom元素2、调用子组件中的data3、调用子组件方法4、子组件调用父组件方法 vue中ref的功能是十分强大的 1 、直接获取dom元素 <template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </d
【vue】vue中ref用法
weixin_34049032的博客
01-10 154
1.获取当前元素： 例子： <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'px'}" ref="refName"> <ul> <li>编辑部门</li> <li @click="append()"&gt...
vue $ref
just_a_dream_的博客
04-26 997
&lt;div id="app"&gt; &lt;ul&gt; &lt;li v-for="index in a" @click="test(index)" ref='button'&gt;{{index}}&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;script&gt; var app=n
vue3 $refs的用法
最新发布
08-21
2. 在组件的方法或生命周期钩子函数中使用 `$refs` 来访问组件实例或DOM元素： ```javascript export default { mounted() { const componentInstance = this.$refs.myRef // 访问组件实例 const domElement = ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值