【第二十一篇】Vue中的ref和$refs

已于 2022-04-11 20:31:12 修改
阅读量4.1w 收藏 102
点赞数 68
分类专栏： 超详细VUE专栏 文章标签： Vue ref $refs
于 2019-08-02 17:55:08 首次发布
禁止转载
本文链接：https://blog.csdn.net/qq_38526573/article/details/98216037
版权
超详细VUE专栏 专栏收录该内容
26 篇文章 135 订阅 ¥49.90 ¥99.00
订阅专栏

在这里插入图片描述

  在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现，本文我们就来详细的介绍下这个内容

ref

   ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。

$refs

   $refs 是一个对象，持有已注册过 ref 的所有的子组件。

具体演示

1.基础代码

  先来准备案例基础代码，如下

<!DOCTYPE html>
了解本专栏 订阅专栏 解锁全文
波波烤鸭
关注
  • 68
    点赞
  • 踩
  • 102
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 19
    评论
专栏目录
订阅专栏
Vue中的 ref 和 $refs
sunhy007的博客
07-04 2051
ref 有三种用法： 1、ref 加在普通的元素上，用this.￥refs.（ref值） 获取到的是dom元素 2、 ref 加在子组件上 ， 用this.￥refs.(ref值) 获取到的就是组件实例 ，可以用组件的所有方法。 在使用方法的时候直接用 this.￥refs.(ref值).方法() 就能直接用了 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 注意点： 如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ; 这点和其他属性一样，如果是固定
Vue(ref和$refs属性介绍与使用)
kalvin_y_liu的博客
12-30 3万+
在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现，本文我们就来详细的介绍下这个内容除了自定义属性外，Vue实例还暴露一些有用的实例属性和方法，他们都有前缀$，以便和用户定义的属性和方法分开。
vue中ref和$refs用法详解
qq_42357338的博客
10-18 2334
一、基本概念 Vue中的ref用来给元素或子组件注册引用信息，而$refs可以用来获取ref注册过的元素或组件，并调用其方法。 二、基本用法 用法： 子组件上定义ref=“refName”, 父组件的方法中用 this.$refs.refName.method 去调用子组件方法 三、几种情况 当ref用在组件上时，用$refs获取到的的是组件实例。 <template> <div id="app"> <Home ref="test" /> </div&
关于Vue3中$refs的两种使用方式
最新发布
执笔写JAVA
05-26 1083
【代码】关于Vue3中$refs的两种使用方式。
vue中ref与$refs详解
weixin_43905830的博客
05-01 5072
ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs上，如果在普通的DOMM元素上使用，那么就是指向普通的DOM元素。 ref的三种用法： 1、ref加在普通元素上，用this.refs.name或者this.refs.name或者this.refs.name或者this.refs[‘name’]获取的1是DOM元素 <!DOCTYPE html> <h...
Vue中ref和$refs的介绍与使用
chenzimin_blog
04-25 3417
之前没怎么注意 ref 的使用。后来一次结合 for 循环使用。才发现 ref 的使用细节满满。于是就总结了一下。 ref作用 用来给元素或者子组件注册引用信息。引用信息将会注册给父组件的$refs对象上。 1、如果给普通的dom元素使用，引用指向的是dom元素。 2、如果是给子组件使用，引用指向的是子组件的实例。 注意： 1、$refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定。 2、微信小程序中给dom元素使用ref无效。得到的是 空对象
Vue与ref属性与refs
热门推荐
前端技术的学习整理
05-25 17万+
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册实例：这里为了在create的时候引用DOM元素，先在DOM中使用ref标签进行了注册，然后便可以通过’this.$refs’再跟注册时的名称来...
vue中的ref和$refs的使用
01-21
ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$...3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 普通的DOM元素上使用 <input type=textref=TEXT/ > <button @click=add>
vue.js中ref和$refs的使用及示例讲解
10-16
在Vue.js中，`ref`和`$refs`是两个非常重要的特性，它们允许开发者在组件内部或父组件中直接引用子组件或DOM元素。在深入讲解这两个概念之前，我们先了解一下它们的基本定义。 `ref`是一个特殊的属性，可以在模板中...
vue.js中ref及$refs的使用方法解析
10-16
主要介绍了vue.js中ref及$refs的使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue 父组件通过$refs获取子组件的值和方法详解
10-16
总结来说，Vue 父组件通过 `$refs` 获取子组件的值和方法是一种直接的通信方式，适用于某些场景，如需在父组件中直接调用子组件的方法或获取实时状态。但通常，推荐使用更灵活且易于维护的通信方式，如 props、事件...
带你了解vue的$refs和ref（附带常见问题）
tsang荒男的博客
09-16 1760
vue的方法 通过vue的官方文档说明： 通过文档我们知道，ref和$refs其实就是为了操作DOM的
Vue知识点二：$refs的基本用法
HUMM
01-27 3万+
$refs的基本用法 ref 有三种用法 ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素 ref加在子组件上，用this.refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）.方法（） 就可以使用了 如何利用v-f
Vue中ref和$refs的介绍及使用
代码DJ的博客
12-07 1万+
在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。 ref介绍 ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例 通俗的讲，ref特性就是为元素或子组
VUE2语法-$refs和ref属性的使用
雾林小妖的博客
11-22 1万+
VUE中使用ref修饰标签，通过$refs获取标签的相关信息。
Vue里ref($refs)的用法
张木期的博客
10-14 1万+
在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现，本文我们就来详细的介绍下这个内容 ref    ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。 $refs       $refs是一个对象，持有已注册过 ref的所有的子组件。 详细可看此篇文章比较通俗易懂 Vue教程(ref和$refs的使用)
18、ref和$refs的使用
weixin_46841213的博客
04-14 2056
ref和$refs的使用1、ref概念2、在元素中使用ref3、在组件中使用ref 1、ref概念 在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元
Vue2.x 源码 - ref 和 $refs
weixin_43299180的博客
01-18 1301
上一篇：Vue2.x 源码 - v-model ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。 文章目录`$refs` 的注册解析获取元素上的 `ref` 值总结 $refs 的注册 在函数 initLifecycle 上会往 vm 上设置一个 key 为 $refs 值为一个对象，在src/core/instance/lifecycle.js 文件中： fu.
vue中ref和$refs怎么配合使用
08-26
在Vue中，ref属性用于给DOM元素或子组件添加一个标识，以便在组件的其他部分中可以通过$refs属性引用它们。 要使用ref和$refs配合使用，你可以按照以下步骤进行操作： 1. 在模板中给DOM元素或子组件添加ref属性，例如： ```html <template> <div> <input ref="myInput" type="text"> <button @click="submit">Submit</button> </div> </template> ``` 2. 在组件的JavaScript部分，通过$refs属性来访问ref引用的元素或组件。例如，在submit方法中可以获取输入框的值： ```javascript <script> export default { methods: { submit() { const inputValue = this.$refs.myInput.value; // 使用inputValue进行其他操作 } } } </script> ``` 通过这种方式，你可以在Vue组件中引用具有ref属性的DOM元素或子组件，并在需要的地方使用$refs来访问它们。需要注意的是，$refs是一个对象，包含了以ref为键名的引用。
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

波波烤鸭

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

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

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

打赏作者

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

抵扣说明：

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

余额充值