Vue-$refs的基本用法(Basic usage of Vue – $refs)

$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属性,但是当获取属性时,稍有不注意就会输出undefined导致我们对dom节点的操作报错。为undefined的几种情况记录:

this.$refs
this.$refs.xxx
  • 在created里钩子函数中调用
    原因:created()在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。所以this.$refs压根就调不到那个dom,因为页面还没有挂载上去。
    解决:在mounted () 钩子函数中调用
    注意:在此种情况中,元素节点一定是直接写在html中的,而不是通过数据或者条件渲染的
  • 数据或条件渲染(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 = “某变量 “;
    这点和其他属性一样,如果是固定值就不需要加 :号,如果是变量记得加 :号
:
:

搜索

复制

————————

Basic usage of < strong > $refs < / strong >

1: The ref attribute is added to the < strong > common element < / strong >, using this refs. (Ref value) gets the DOM element

2: The ref attribute is added to the < strong > sub component < / strong >, using this refs. (Ref value) gets the component instance, and all methods of the component can be used.

When using the method, directly click this refs. (Ref value) gets the component instance, and all methods of the component can be used.

When using the method, directly click this refs. (Ref value) (method name) can be used

3: How to use < strong > V-for and ref < / strong > to obtain the array composed of elements (DOM nodes and component instances): < / strong > ref needs to be available after DOM rendering. When using, ensure that DOM has been rendered. For example, it is called in the life cycle mounted () {} hook, or in this$ nextTick(()=> {}). If ref is looped out and there are multiple duplicate names, the value of ref will be an array. At this time, you only need to loop to get a single Ref.

Points to pay attention to the $refs attribute in Vue

Vue greatly helps to reduce the operation of DOM. The way to obtain elements is mainly by adding ref attribute. However, when obtaining attributes, if you don’t pay attention to them, you will output undefined, resulting in errors in our operation on DOM nodes. Records of several situations that are undefined:

this.$refs
this.$refs.xxx
  • Call in the hook function of created
    Reason: created() is called immediately after the instance is created. In this step, the instance has completed the following configuration: Data observer, operation of properties and methods, and callback of watch / event events. However, the mount phase has not yet begun and the $El attribute is not currently visible. So this$ Refs can’t be adjusted to the DOM at all, because the page hasn’t been mounted yet.
    Solution: call in the mounted() hook function
    Note: in this case, the element node must be written directly in HTML, not rendered through data or conditions
  • Call after data or conditional rendering (V-IF, v-show)
    $ref itself is created as a rendering result. They cannot be accessed during the initial rendering and do not exist
    $refs is not responsive and is only populated after the component is rendered
    It is used to register reference information for elements or child components. After registration, it will be registered on the parent component $refs object
    Whether the calling object is used with V-IF
    Ref is not responsive. All dynamically loaded template updates cannot change accordingly.
    Solution: you can use setTimeout (() = > {…}, 0)

Supplement:

  • The function of ref is only valid in the current Vue component, so using ref to obtain DOM elements saves DOM operations and can distinguish between multiple repeated components. Therefore, when obtaining elements, use ref instead of directly using document Getelementbyid; The values obtained by the two methods are the same. After obtaining DOM elements with ref, you can still use the method of document.
  • Ref is used to register reference information for elements or subcomponents. The reference information will be registered on the $refs object of the parent component; If on a child component, the reference points to the component instance
  • $refs is a collection of all registered refs
  • 而$refs相对document.getElementById的方法,会减少获取dom节点的消耗
  • If you want to add different refs through V-for traversal, remember to add: sign, that is: ref = “a variable”;
    This is the same as other attributes. If it is a fixed value, you do not need to add: sign. If it is a variable, remember to add: sign
:
:

search

copy