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

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

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

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

```javascript
this.$refs.usernameInput
```

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

```markup
<input ref="input">
```

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

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

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

```javascript
this.$refs.usernameInput.focus()
```

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

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