$el和$refs的区别

最新推荐文章于 2022-07-23 10:00:24 发布
最新推荐文章于 2022-07-23 10:00:24 发布
阅读量1.2k 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45622540/article/details/105531726
版权

一、ref

1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素

2、ref 加在子组件上，用this. r e f s . （ r e f 值 ） 获 取 到 的 是 组 件 实 例 ， 可 以 使 用 组 件 的 所 有 方 法 。 在 使 用 方 法 的 时 候 直 接 t h i s . refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this. refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）.方法（） 就可以使用了。

二、$el

获取Vue实例关联的DOM元素；

比方说我这里想获取自定义组件tabControl，并获取它的OffsetTop。就需要先获取该组件。

在组件内设置 属性 ref=‘一个名称(tabControl2)’,

然后 this.$refs.tabControl2 就拿到了该组件

切记：ref属性，而获取组件的时候要用$refs

获取 OffsetTop，组件不是DOM元素，是没有OffsetTop的，无法通过 点 .OffsetTop来获取的。就需要通过$el来获取组件中的DOM元素

所以获取元素的OffsetTop的正确写法是：

this. r e f s . t a b C o n t r o l 2. refs.tabControl2. refs.tabControl2.el.offsetTop

前端码字
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中$ref和$el的区别？
m0_50441807的博客
07-12 1104
下面先详细了解$ref： 定义一个父组件： 如果ref使用在元素上的，则 如果ref使用在组件上的，则，那就可以直接使用child组件中定义的所有属性和方法 下面通过ref获取组件的实例，然后调用子组件中定义的方法： 和的区别在于，拿到的是，而拿到的组件中的 如果我想在父组件中获取子组件距离浏览器顶部的距离： 因为拿到的就是子组件的根元素； 如果想要在父组件中继续获取子组件中的其他dom元素： 注：父组件中使用，就相当于子组件中的，可以当成this使用该组件中的所有属性和方法......
$el 和 $refs
m0_57263959的博客
08-08 209
都是 Vue.js 组件中用于访问 DOM 元素的属性，但它们在使用方式和用途上有一些区别。
vue中this.$el 和 this.$ref
热门推荐
zhanglongdream的博客
07-19 5万+
+ + {{el.value}} + vue中也是允许进行dome操作的（但是不建议） 这里我就说说 this.$el和this.$ref的区别 this.$el是在mounted中才会出现的，在created的时候是没有的所以我们引用的时候 mounted () { + /* 事件绑定 */ + this.$el
$refs，$el，$data，$options区别及用法
qq_39141511的博客
09-25 1376
1.$refs 作用跟jq的获取dom元素$一样 有三种用法： 1.ref加在普通的元素上，用this.$refs.(ref值)获取到的是dom元素 2.ref加在子组件上，用this.$refs.(ref值)获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值).方法()就可以使用了。 3.如何利用v-for和ref获取一组数组或者dom节点 需要注意的点： 1.通过 :ref=某变量添加ref，如果想获取该ref时需要加[0]，如this.$refs[refs
深入理解vue $refs的基本用法
08-29
Vue $refs是 Vue.js 框架中一个强大且灵活的工具，允许开发者访问和操作组件或元素的DOM节点。本文将深入理解Vue $refs的基本用法，并探索其在实际开发中的应用场景。 一、什么是Vue $refs？ Vue $refs是Vue.js...
vue组件 $children,$refs，$parent的使用详解
08-29
Vue 组件中，$children, $refs, $parent 是三个非常重要的属性，它们之间存在着紧密的联系，正确地使用它们可以帮助我们更好地管理和操作组件。 $children 属性 $children 属性返回的是一个组件集合，如果你清楚...
Vue $emit $refs子父组件间方法的调用实例
10-18
今天小编就为大家分享一篇Vue $emit $refs子父组件间方法的调用实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中$refs的用法及作用详解
08-27
el: "#app", methods:{ add:function(){ this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗 } } }) 在上面的例子中，我们使用ref attribute将input元素绑定到组件的$refs对象中...
VUE $refs 与 $el 最强详解
不想成为可以改变世界的程序员，不是一个好程序员
03-01 3万+
$refs 与 $el 是什么？ 作用是什么? ref，$refs，$el ，三者之间的关系是什么？看本博主为您带来的最新文章，通过大量的列子来给你讲解，请带上你聪明的大脑，在这个过程中希望你可以举一反三。 ref (给元素或者子组件注册引用信息)就像你要给元素设置样式，就需要先给元素设定一个 class 一样，同理，你想获取哪个元素的 DOM，就给这个元素先设定一个 ref，其实这里和 JS 中的 document.各种方法获取 DOM 差不多，不过 ref 是访问 VUE 虚拟出来的DOM，...
vue中$el等属性
轻风细雨_林木木
05-07 5244
1. 属性： 只举例常见的部分属性 * vm.$el 获取Vue实例关联的DOM元素； * vm.$data 获取Vue实例的data选项（对象） * vm.$options 获取Vue实例的自定义属性（如vm.$options.methods,获取Vue实例的自定义属性methods） * vm.$refs 获取页面中所有含有ref属性的DOM元素（如vm.$refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个） 2. $el 和 $r
前端面试题总结（一）
weixin_48720273的博客
07-23 419
vue常用面试题
VUE中$refs和$el的使用
小太阳的博客
08-12 6525
ref: 给元素或者子组件注册引用信息 ref有三种用法： 1.ref加在普通元素上，获取用this.$ref.xxx可以获取到dom元素。 <div ref="system">测试</div> // 获取 mounted() { console.log(this.$refs.system); } 2.ref加在子组件上，用this.$ref.xxx可以获取到组件实例，可以使用子组件的所有方法。 使用： // this.$ref.xxx.方法名() // 父组件 <con
vue $refs的基本用法
weixin_34404393的博客
05-26 962
<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> <script> new Vue({ el: "#app", methods:{ ...
this.$refs/this.$el
底层码农
12-03 6891
this.$refs/this.$el
Vue中$refs的使用方法！
Power的博客
01-02 8424
Vue中$refs怎么使用呢？ 查看Vue官网$refs有两种使用方法
this.$el和this.refs的区别
最新发布
11-27
根据提供的引用内容，可以得知this.$el和this.$refs都是用于获取Vue组件中的元素，但是它们的作用和使用方法是不同的。 - this.$el是Vue实例的一个属性，它指向Vue实例所管理的DOM元素。通过this.$el可以获取到Vue实例所挂载的DOM元素，但是它只能在Vue实例已经挂载到DOM元素上之后才能使用。例如： ```javascript const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) console.log(app.$el) // 输出：<div id="app">Hello Vue!</div> ``` - this.$refs是Vue实例的另一个属性，它可以用来获取Vue组件中的子组件或DOM元素。通过在子组件或DOM元素上添加ref属性，可以在父组件中通过this.$refs来获取到对应的子组件或DOM元素。例如： ```html <template> <div> <child-component ref="child"></child-component> <div ref="myDiv">Hello World!</div> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, mounted() { console.log(this.$refs.child) // 输出：ChildComponent组件实例 console.log(this.$refs.myDiv) // 输出：<div>Hello World!</div> } } </script> ``` 综上所述，this.$el是用来获取Vue实例所管理的DOM元素，而this.$refs是用来获取Vue组件中的子组件或DOM元素。它们的使用场景和作用是不同的。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值