n How to use Template refs in Vue.js | CodimTh

Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh

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() {
  mounted() {

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>


Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts


Page Facebook