refs de Template

Esta página assume que você já leu o Básico de Componentes. Leia lá primeiro se você for novo em componentes.

Apesar da existência de propriedades e eventos, às vezes você ainda pode precisar acessar diretamente um componente filho em JavaScript. Para isso, você pode atribuir um ID de referência ao componente filho ou elemento HTML usando o atributo ref. Por exemplo:

<input ref="input" />

Isso pode ser útil quando você deseja, por exemplo, de forma programática, aplicar o focus nesse input na montagem do componente:

const app = Vue.createApp({})

app.component('base-input', {
  template: `
    <input ref="input" />
  `,
  methods: {
    focusInput() {
      this.$refs.input.focus()
    }
  },
  mounted() {
    this.focusInput()
  }
})

Além disso, você pode adicionar outro ref ao próprio componente e usá-lo para acionar o evento focusInput a partir do componente pai:

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

this.$refs.usernameInput.focusInput()

Atenção

$refs é preenchido apenas após o componente ter sido renderizado. Isso serve apenas como uma saída de emergência para a manipulação direta de elementos filhos - você deve evitar acessar $refs de dentro de templates ou dados computados.

Veja também: Usando refs de templates na Composition API