当前位置 : 主页 > 编程语言 > 其它开发 >

Vue-$refs的基本用法

来源:互联网 收集:自由互联 发布时间:2022-05-30
$refs的基本用法 1:ref属性 加在 普通元素 上,用this.refs.(ref值)获取到的是 dom元素 2:ref属性加在 子组件 上,用 this.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 = "某变量 "; 这点和其他属性一样,如果是固定值就不需要加 :号,如果是变量记得加 :

搜索

复制

【转自:美国cn2服务器 http://www.558idc.com/mg.html欢迎留下您的宝贵建议】
上一篇:Beego笔记
下一篇:没有了
网友评论