A common use case for $refs is focusing on a DOM element when a certain event happens. The autofocus property works on page loads. But what if you want to give focus back to the username input if login failed? If you give the username input a ref attribute in your template, you can then accessthe username input using this.$refs.username as shown below.
How Vue.js refs work
refs in Vue.js is defined as the referencing to make the DOM element selectable by making the key in the parent $refs and considered to be a Vue Instance property. It tells how to directly access the child functions on parent elements using this attribute and they are the most reliable attributes to reach into our templates and grab an element easily meanwhile accessing the data for that element.
When a Simple DOM element is used the reference is done with that element. This Special attribute has the beauty to directly access the DOM element to fetch some data.
What is Vue.js?
The general syntax is given as:. When we make this in parent DOM it may expose as this.
Introduction to Vue.js refs
refs is not a standard HTML attributes and it is used only in Vue. When a ref attribute is added to an HTML element through Vue template, then we shall reference that element or in other case taking a child element in the Vue Instance.