vue 中的ref属性的介绍

最新推荐文章于 2024-02-19 22:00:10 发布
最新推荐文章于 2024-02-19 22:00:10 发布
阅读量3.3k 收藏 16
点赞数 7
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaocuizao/article/details/99685302
版权

使用vue开发时经常会用到ref属性，ref属性有什么作用呢？

用法①⭐：有时候我们想在父组件中调用子组件的方法或属性，这个时候该怎么做呢？可以通过为子组件设置ref，然后通过this.$refs.refName（refName为子组件的ref值）获取到子组件，然后就可以随意调用子组件的方法和属性了。

用法②⭐：有时候我们想操作子组件或HTML标签的DOM，在vue中我们几乎不使用class或id来获取元素的DOM，这个时候该怎么做呢？可以为子组件或想要操作的DOM标签添加ref属性，然后通过this. r e f s . r e f N a m e . refs.refName. refs.refName.el或者this.$refs.refName来获取DOM。

那么在使用ref时要注意什么呢？

根据ref使用的对象不同，获取到的结果也是不一样的：

<1> 自定义组件使用ref属性，通过ref值可获取到该自定义组件；

<2> 普通HTML标签使用ref属性，通过ref值获取到的是该标签对应的DOM；

xiaocuizao
关注
  • 7
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue 2中ref属性的使用方法及注意事项
08-30
主要给大家介绍了关于Vue 2中ref属性的使用方法及注意事项的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
Vue Ref属性配置学习
06-09
Vue Ref属性配置学习
Vue3 ref函数详解
最新发布
m0_68932924的博客
02-19 494
ref函数是 Vue 3 中用于创建响应式数据的一个函数。它接受一个初始值作为参数，并返回一个响应式引用对象。这个引用对象具有一个名为value的属性，用于存储和访问响应式数据的值。通过ref函数创建的响应式数据，当数据发生变化时，Vue 会自动追踪并更新。ref函数是Vue3 Composition API的一个重要部分，它为我们提供了创建和管理响应式数据的更强大、更灵活的方式。希望这篇文章能帮助你更好地理解和使用ref函数。
vue组件传值以及el-table分页数据+回显+勾选状态+记录数据
m0_58293192的博客
12-27 5055
vue组件传值以及el-table分页数据+回显+勾选状态+记录数据
Vue中ref的作用
weixin_61974436的博客
01-09 65
Vue中ref的作用
vue中的ref与$refs的使用
weixin_44717159的博客
10-08 385
**ref:**用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向该子组件实例。ref特性就是为元素或子组件赋予一个ID引用,通过this.refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例。ref特性就是为元素或子组件赋予一个ID引用,通过this.refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在
vue组件中ref的用法
juceli的博客
02-21 8706
1/el-table中ref的用法： 普通用法： ref=“refs”  查找时使用this.$refs.refs 2/组件中ref的用法： &lt;child ref="childRef"&gt;&lt;/child&gt; 查找时this.$refs.childRef找到的是子组件 如果子组件里el-table不是唯一组件，this.$refs.childRef.$children[0]找到t...
Vue开发学习笔记:Vue3中使用标签的ref属性设置el-table点击单元格自动获取焦点
JustWantToFly的博客
05-09 4665
el-table使用ref标签属性设置单元格点击自动获取焦点
解决el-table的$refs获取不到的问题（踩坑篇）
草巾冒小子的博客
08-31 4910
解决el-table的$refs获取不到的问题（踩坑篇）
通过ref让element-ui的表格高度自适应
weixin_43064669的博客
10-25 1277
首先在table上绑定ref <template> <el-table ref="tableRef" :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width...
vue el-table的常用操作
Yueqin0512的博客
06-28 6124
1.去掉最下面的那一条线 .el-table::before { height: 0; } 2.表格去掉背景颜色变透明 .el-table, .el-table__expanded-cell { background-color: transparent !important; } .el-table th, .el-table tr, .el-table td { background-color: transparent !important; } /* 最外层透明 */ :
详解Vue的ref特性的使用
12-28
一、ref的基本使用 ref的使用 <!-- `vm.$refs.p`将会是DOM结点 --> <p ref=p>hello <!-- `vm.$refs.child`将会是子组件实例 --> <child ref=child> 如果在普通的 DOM 元素上使用，引用指向的就是DOM ...
解决vue中对象属性改变视图不更新的问题
08-27
下面小编就为大家分享一篇解决vue中对象属性改变视图不更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
5.5 Vue中的ref引用机制
蚊者逆袭的博客
04-26 788
Vue 的 ref 是一种引用机制，通过给元素或组件指定 ref 属性，可以在 Vue 实例中访问到对应的元素或组件实例。
vue基础 - 05 （元素索引ref / refs、指令directives、计算属性computed、过滤器filters）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-03 499
1、元素索引 ref属性：vue提供的，用于把一个变量绑定到元素上 $refs：存储了所有绑定在ref上的变量 <template> <div> <!-- 元素索引：ref ref属性：vue提供的，用于把一个变量绑定到元素上 --> <input type="text" ref="my_input"> <p ref="my_p">hello...
vue使用element ui---Table 表格的全选、单选翻页亦是选中状态
qq_38394175的博客
10-12 2635
1.页面 <el-table ref="multipleTable" :data="tableData" border :row-key="getRowKeys" //状态条件筛选事件 @filter-change="handleFilterChange" //时间排序筛选事件 @sort-change="changeTableSort" //全选事件 @selection-change="handleSelectionCh
vue使用Element UI时，el-table表格整行操作单选禁选并隐藏全选框
钱多多的博客
06-08 3928
表格复选修改为单选，只可选择一个；不满足条件的不可勾选；可进行整行操作
vue.js 细节
zhzwei的博客
12-09 248
ref 预期：string ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： <!-- `vm.$refs.p` will be the DOM node --> <p ref="p">hello</p> <!-- `vm.$refs.child` will be the child component instance
vue 的ref是什么
weixin_42590539的博客
02-15 2156
在Vue中，ref是一个用于访问组件或DOM元素的属性。通过在元素上使用v-bind指令将ref绑定到组件实例或DOM元素上，就可以使用$refs对象访问它们。 例如，假设你有一个组件内部包含一个输入框，你可以在该输入框上设置ref属性： <template> <div> <input type="text" ref="myInput"> &lt...
在vue3中ref标签属性使用
06-11
在 Vue 3 中，`ref` 是一个新的响应式 API，用于在模板中引用一个元素或组件，并可以在 JavaScript 代码中访问该元素或组件的属性和方法。 在模板中，可以使用 `ref` 指令来创建一个 `ref` 对象，并将其绑定到一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值