Template refs

This page assumes you’ve already read the Components Basics. Read that first if you are new to components.

Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you can assign a reference ID to the child component or HTML element using the ref attribute. For example:

  1. <input ref="input" />

This may be useful when you want to, for example, programmatically focus this input on component mount:

  1. const app = Vue.createApp({})
  3. app.component('base-input', {
  4.   template: `
  5.     <input ref="input" />
  6.   `,
  7.   methods: {
  8.     focusInput() {
  9.       this.$refs.input.focus()
  10.     }
  11.   },
  12.   mounted() {
  13.     this.focusInput()
  14.   }
  15. })

Also, you can add another ref to the component itself and use it to trigger focusInput event from the parent component:

  1. <base-input ref="usernameInput"></base-input>
  1. this.$refs.usernameInput.focusInput()

When ref is used together with v-for, the ref you get will be an array containing the child components mirroring the data source.

WARNING

$refs are only populated after the component has been rendered. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing $refs from within templates or computed properties.

See also: Using template refs in Composition API