# refs de Plantillas
Esta página asume que usted ya ha leído Básicos de Componentes. Léalo primero si usted es nuevo con componentes.
Pese a la existencia de props y eventos, a veces es posible que necesita
acceder directamente a un componente secundario en JavaScript. Para lograrlo puede asignar una ID de referencia al componente secundario o elemento HTML utilizando el atributo ref
. Por ejemplo:
<input ref="input" />
Este puede ser útil cuando quiere, por ejemplo, programáticamente enfocar a esta entrada cuando se monte el componente:
const app = Vue.createApp({})
app.component('base-input', {
template: `
<input ref="input" />
`,
methods: {
focusInput() {
this.$refs.input.focus()
}
},
mounted() {
this.focusInput()
}
})
2
3
4
5
6
7
8
9
10
11
12
13
14
15
También, puede agregar otra ref
al componente mismo y utilizarlo para disparar evento focusInput
desde el componente padre:
<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput.focusInput()
WARNING
Las $refs
son sólo disponibles después de cuando el componente haya sido renderizado. Sólo sirve como una salida de emergencia para las manipulaciones directas de los componentes secundarios - debería evitar acceder $refs
desde dentro de plantillas o propiedades computadas.
Vea también: Utilizar refs de plantillas en API de composición