Vue里this.$refs（ref）（防老年痴呆）

最新推荐文章于 2024-05-12 19:12:57 发布
最新推荐文章于 2024-05-12 19:12:57 发布
阅读量1k 收藏 1
点赞数
分类专栏： Element+Vue 文章标签： refs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42307369/article/details/104378152
版权

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

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

      3、在函数处理的时候，拿不到元素值的时候，可以试试，前端输出

console.info(this.$refs); //进行取值

Ai卿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
this.$ref获取元素 和 子组件
from_shanghai的博客
08-09 4381
<div id="#app"> <div> <input type="button" name="" value="获取元素内容" @click="getElement"> <h1 ref="myh1">我是h1</h1> //ref 获取元素 是在获取的那个元素上，肯定是承载元素的 标签上，写 ref="xxx" xxx...
Vue 中 $refs 的使用
ShiYadong的专栏
08-21 3088
说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素） 使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取 注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods 1. 添加ref属性 &lt;div id="app"&gt; &lt;h1 ref="h1Ele"&gt;这是H...
vue $refs的基本用法
weixin_34404393的博客
05-26 965
<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> <script> new Vue({ el: "#app", methods:{ ...
2024年前端最全Vue进阶（四十）：ref ($refs) 用法详解_this，程序员技术面试题
最新发布
2401_84619530的博客
05-12 519
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。//这里的this其实还是div.insideFather。ref在里面的元素上。
vue组件方法 ref &&this.refs
qq_36528523的博客
08-01 98
使用前 需要在子组件模板定义。父组件使用时 只需要调用。//name为自定义名字。
Vue进阶（四十）：ref ($refs) 用法详解_this
2301_82243603的博客
04-29 460
refref作用在普通元素上，用获取dom元素；ref作用子组件上，用获取到组件实例，可以使用组件所有方法。利用v-for和ref获取一组数据或dom节点。
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
在Vue.js中，`this.$refs` 是一个非常重要的特性，它允许开发者访问Vue实例挂载的DOM元素或子组件实例。然而，在某些情况下，尝试通过`this.$refs`获取DOM或组件时可能会遇到错误。本文将深入探讨这个问题及其解决...
vue列表单项展开收缩功能之this.$refs的详解
10-17
在Vue.js中，`this.$refs` 是一个用于获取组件实例引用的重要特性，它允许开发者直接访问DOM元素或自定义组件实例。在这个场景中，`this.$refs` 被用来实现列表单项的展开和收缩功能。下面我们将深入探讨如何使用`...
vue中 this.$set的用法详解
10-16
在Vue.js框架中，`this.$set` 是一个关键的方法，用于处理响应式数据更新的问题。在某些情况下，当你尝试直接修改对象的属性或数组的元素时，Vue可能无法检测到这些变化，进而不会自动更新视图。`this.$set` 方法...
Vue中的this.$options.data()和this.$data用法说明
10-15
在Vue.js框架中，`this.$options` 和 `this.$data` 是两个非常重要的属性，它们分别用于获取组件的配置选项和当前实例的数据对象。在开发过程中，正确理解和使用这两个属性对于管理组件的状态至关重要。 首先，`...
Vue单文件组件中多个同名的ref属性，this.$refs的取值及其使用注意事项
fz_leaves的博客
01-04 3万+
Vue官方文档： ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。 1 当同一组件内部，有多个同名ref引用时 this.$refs[ref名称]指向文档流中靠下的组件或DOM节点，若是ref相同的组件或DOM节点间是父子关系，则指向父级组件或DOM节点。 1.1 this.$refs[ref名称]指向文档流中靠下的组件或DOM节点： <template&gt
this.$refs使用方法
a_靖的博客
08-21 8078
深入理解和使用this.$refs——Vue.js的利器
十四、vue 使用 `this.$refs` 来获取元素和组件
快乐de馒头
12-19 2658
使用 `this.$refs` 来获取元素和组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
Vue this.$refs的使用
热门推荐
可控的事情要谨慎，不可控的事情要乐观。
10-10 6万+
案例一、ref 写在标签上时 <!-- ref 写在标签上时：this.$refs.名字 获取的是标签对应的dom元素 ref 写在组件上时：这时候获取到的是 子组件（比如counter）的引用--> <div id="root"> <!-- ref = 'hello'： 给div 起了一个引用的名字 hello --> ...
Vue：ref和this.$refs的使用
浪里小白龙
08-23 1828
官方文档的定义： ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。 昨天遇到这样一个问题，产品要在页面上做一个上传excel的功能（虽然我也不知道为什么要这么设计），上传组件是另一个项目组写的JobUI，他们做了一个小叉按钮来删除附件，但是没有做监听，我试了下在上传的方法里可以清除附件upfile对象，却无法改变显示。 于是我查了下他们的源代码。 <div
vue中ref的使用（this.$refs获取为undefined）
weixin_30950887的博客
05-13 1万+
如果你获取到的总是空的，你注意一下： 1、你在哪里调用，和你调用的对象 试试在mounted（）里面调用有效果没有 调用的对象是本来就存在的，还是需要数据渲染之后才会出现的，同理，在mounted（）里面调用看看 2、调用对象是不是数组列表 我一开始设置ref在v-for列表上，直接获取this.$refs.name.style，永远是空的， 后来才发现，this.$r...
Vue第七课solt及ref的使用
qq_43538170的博客
01-09 586
slot插槽和ref、$parent slot插槽 slot就是子组件里给DOM留下的坑位 <子组件>DOM</子组件> slot是动态的DOM ref获取子组件实例 识别：在子组件或元素上使用属性ref=“xxxx” 获取：this.$refs.xxxx 获取元素 $el 是拿其DOM parent获取父组件实例（可在子组件直接使用this.parent获取父组件实例（可在子组件直接使用this.parent获取父组件实例（可在子组件直接
vue中ref的使用方法，ref与prop的区别
weixin_44281416的博客
12-21 1033
1、ref加在普通元素上，使用this.ref.name获取到的是dom元素。 2、ref加在子组件上，用this.ref.name获取的是组件实例，可以使用组件的所有方法。 例： <busIndustry ref="busIndustry"></busIndustry> import busIndustry from './components/busIndustry' components:{ busIndustry } mouted:{ this.search(
React之ref详细用法
weixin_33939380的博客
03-12 1106
在react典型的数据流中，props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据量之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是re...
vue中this.$refs
04-10
在Vue中，this.$refs是一个特殊的属性，它允许你访问组件或DOM元素的引用。通过使用ref属性，你可以在模板中给组件或DOM元素添加一个唯一的标识，然后通过this.$refs来引用它们。 对于组件引用，你可以在组件的标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值