Template refs

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:

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

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

 

Vue refs tutorial: Accessing DOM elements in a Vue.js app

In this tutorial, we’ll demonstrate how to reference HTML elements in your Vue.js components.

We’ll cover the following in detail:

• What is Vue.js?
• What are refs in Vue.js?
• How do you use refs in Vue.js?
• this.refs in Vue.js
• How Vue.js refs work
• Vue $refs
• Getting DOM elements in Vue.js
• Displaying HTML elements in Vue.js
• Displaying the HTML input value
• Displaying a Vue element’s URL
• Handling conditionals in Vue.js

 

作者:Chuck Lu    GitHub