ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue-$refs的基本用法

2022-05-15 10:35:31  阅读:131  来源: 互联网

标签:Vue dom refs 元素 用法 获取 组件 ref


$refs的基本用法

1:ref属性 加在普通元素上,用 this.refs.(ref值) 获取到的是dom元素

2:ref属性加在子组件上,用 this.refs.(ref值) 获取到的是组件实例 ,可以使用组件的所有方法 。

在使用方法的时候直接 this.refs.(ref值) 获取到的是组件实例,可以使用组件的所有方法。

在使用方法的时候直接 this.refs.(ref值) .(方法名称) 就可以使用了

3:如何利用v-for 和 ref 获取元素(dom节点 、组件实例)组成的数组
应注意的坑:
ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。
如果ref 是循环出来的,有多个重名,那么ref的值会是一个数组 ,此时要拿到单个的ref 只需要循环就可以了。

vue里的$refs属性要注意的点

Vue的极大程度的帮助减少了对dom的操作,其中获取元素的方式主要通过添加ref属性,但是当获取this.$refs属性时,稍有不注意就会输出undefined导致我们对dom节点的操作报错。this.$refs.xxx为undefined的几种情况记录:

    1. 在created里钩子函数中调用

      原因:created()在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。所以this.$refs压根就调不到那个dom,因为页面还没有挂载上去。

      解决:在mounted () 钩子函数中调用

      注意:在此种情况中,元素节点一定是直接写在html中的,而不是通过数据或者条件渲染的

    2. 数据或条件渲染(v-if,v-show)之后的调用

      $ref本身作为渲染结果被创建,在初始渲染的时候不能访问他们,是不存在的

      $refs不是响应式的,只在组件渲染完成后才填充

      用于元素或子组件注册引用信息,注册完成,将会注册在父组件$refs对象上

      调用对象是否和v-if结合使用

      ref不是响应式的,所有的动态加载的模板更新它都无法相应的变化。

      解决:可以通过setTimeOut(()=>{...}, 0)来实现

补充:

  • ref的作用是只在当前的vue组件中有效,所以使用ref来获取dom元素,节省了dom的操作又可以实现多个重复组件中的区分,所以获取元素的时候用ref不要直接使用document.getElementById来操作;二者获取到的值是一样的,用ref获取到DOM元素以后还是可以使用document的方法。

  • ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上;如果在子组件上,引用就指向组件实例

  • $refs 是所有注册过的ref的一个集合

  • 而$refs相对document.getElementById的方法,会减少获取dom节点的消耗

  • 如果通过v-for 遍历想加不同的ref时记得加 :号,即 :ref = "某变量 "; 这点和其他属性一样,如果是固定值就不需要加 :号,如果是变量记得加 :

搜索

复制

标签:Vue,dom,refs,元素,用法,获取,组件,ref
来源: https://www.cnblogs.com/wj5181021327/p/16272488.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有