Vue.js

# Ссылки на элементы в шаблоне

Подразумевается, что уже изучили и разобрались с разделом Основы компонентов. Если нет — прочитайте его сначала.

Несмотря на существование входных параметров и событий, иногда может потребоваться прямой доступ к дочернему компоненту в JavaScript. Для этого можно через атрибут ref присвоить специальный ID ссылки дочернему компоненту или HTML-элементу. Например:

<input ref="input" />
1

Это пригодится, например, когда требуется программно перевести фокус на поле ввода при монтировании компонента:

const app = Vue.createApp({})

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

Можно добавить другой ref и на сам компонент, чтобы использовать его для вызова метода focusInput из родительского компонента:

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

ВНИМАНИЕ

Ссылки в $refs регистрируются после отрисовки компонента. Они предназначены только для исключительных случаев, когда дочерними элементами необходимо управлять напрямую — следует избегать доступа к $refs в шаблоне или вычисляемых свойствах.

См. также: Использование ссылок на элементы шаблонов в Composition API

← Обработка крайних случаев →