Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use $refs and $el in vue". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to use $refs and $el in vue" can help you solve the problem.

Usage: 1."$refs" is used to register reference information for elements or subcomponents, syntax "this.$" refs. (ref value)"or"this.$ refs. (ref value). Method () ";2,"$el"is used to get DOM elements associated with Vue instances, syntax"this.$" refs. Component ".

Operating environment: Windows 10 system, Vue2.9.6 version, DELL G3 computer.

What is the use of $refs and $el in ue

ref is used to register reference information for an element or subassembly

ref has three uses:

1, ref added to the ordinary elements, with this.$ refs. (ref value) Get the dom element

2, ref added to the subassembly, with this.$ refs. (ref value) Get is the component instance, you can use all the methods of the component. direct this.$when using methods refs. (ref value). Method (s) can be used.

3. How to use v-for and ref to get an array or dom node

If you want to add different ref 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 do not need to add: sign, if it is a variable remember to add: sign. (Colon added, indicating that it is followed by a variable or expression; no colon is followed by the corresponding string constant (String))

Pits that should be noted include:

1, ref needs to be completed after the dom rendering will be available, in the use of time to ensure that the dom has been rendered. such as in the lifecycle mounted(){} hook, or in this.$ nextTick(()=>{}).

2, if ref is looped out, there are multiple duplicate names, then the value of ref will be an array, at this time to get a single ref only need to loop.

vm.$ el

Get DOM elements associated with Vue instances;

Let's say here I want to get the custom component tabControl and get its OffsetTop. You need to get that component first.

Set the property ref='a name (tabControl2)' within the component,

And then this.$ refs.tabControl2 gets the component

Remember: ref attribute, and get components when you use $refs

Get OffsetTop. Component is not DOM element, it has no OffsetTop, and cannot be obtained through point.OffsetTop. You need to get DOM elements from the component via $el

The content of "how to use $refs and $el in ue" is introduced here. Thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.