Acceso a Elementos del DOM

VueuseTemplateRef

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const inputRef = useTemplateRef<HTMLInputElement>('inputRef')

function focusInput() {
  inputRef.value?.focus()
}
</script>

<template>
  <input ref="inputRef" type="text" />

  <button @click="focusInput">
    Focus input
  </button>
</template>

Usa template refs para obtener una referencia directa a un elemento del DOM después de que se renderiza.

Vue docs

ReactuseRef

import { useRef } from 'react'

function InputFocus() {
  const inputRef = useRef<HTMLInputElement | null>(null)

  function focusInput() {
    inputRef.current?.focus()
  }

  return (
    <>
      <input ref={inputRef} type="text" />

      <button onClick={focusInput}>
        Focus input
      </button>
    </>
  )
}

Usa useRef para guardar una referencia mutable al nodo del DOM y acceder a él desde handlers o efectos.

React docs

AngularviewChild()

import { Component, ElementRef, viewChild } from '@angular/core'

@Component({
  selector: 'app-input-focus',
  standalone: true,
  template: `
    <input #inputRef type="text" />

    <button (click)="focusInput()">
      Focus input
    </button>
  `,
})
export class InputFocusComponent {
  inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inputRef')

  focusInput() {
    this.inputRef().nativeElement.focus()
  }
}

Usa viewChild() para consultar un elemento del template y acceder a su ElementRef desde el componente.

Angular docs