Vue.js refs

In Vue.js, refs are references to DOM elements or other components. This occurs programmatically.

A large use case for refs is direct DOM manipulation and integration with DOM-based libraries (that usually take a DOM node they should mount to).

Refs are defined using ref="name" on a native element or child component in the template. In the following instance, the input will be stored in a theInput ref:

<template>
  <div id="app">
    <input ref="theInput" />
  </div>
</template>

Refs can be accessed from the Vue.js component instance through this.$refs[name]. So, in the previous example, where we had a ref defined as ref="theInput", we can access it through this.$refs.theInput.

To focus the input when a button is clicked, we could write the following:

<template>
  <div id="app">
    <input...