How to use Template refs in Vue.js

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:

<input ref="input" />

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

const app = Vue.createApp({})

app.component('base-input', {
  template: `
    <input ref="input" />
  `,
  methods: {
    focusInput() {
      this.$refs.input.focus()
    }
  },
  mounted() {
    this.focusInput()
  }
})

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

<base-input ref="usernameInput"></base-input>

this.$refs.usernameInput.focusInput()