Доступ к экземплярам дочерних компонентов и элементов

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

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

Теперь в компоненте, где вы определили этот ref, вы можете использовать:

this.$refs.usernameInput

для доступа к экземпляру <base-input>. Это может быть полезно, если вы хотите например, программно добавить фокус на поле из родителя. В этом случае компонент <base-input> может аналогичным образом использовать ref чтобы обеспечить доступ к определённым элементам внутри него, например:

<input ref="input">

И даже определить методы для использования родителем:

methods: {
  // Используется родителем для фокуса на input
  focus: function () {
    this.$refs.input.focus()
  }
}

Таким образом мы позволим родительскому компоненту добавлять фокус на input внутри <base-input> с помощью:

this.$refs.usernameInput.focus()

Когда ref используется вместе с v-for, то ref будет массивом, содержащим дочерние компоненты, отображаемых от источника данных.

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