Atributo ref de Vue3

Vue3 内置属性Atributos integrados de Vue3

refEl atributo se utiliza para registrar información de referencia en elementos o componentes hijos, de modo que se pueda acceder directamente a los elementos DOM o instancias de componentes en el código JavaScript.

Descripción básica

refEs una forma importante de obtener elementos DOM o instancias de componentes en Vue. Nos permite manipular directamente el DOM o llamar a métodos de componentes hijos después de que la instancia de Vue se haya montado.

  • Tipo: String | Function
  • FunciónAcceso a elementos DOM o instancias de componentes hijos, realizar operaciones como control de foco, llamadas a métodos, etc.

Uso básico

1. Uso de ref en Options API

En Options API, las referencias registradas con ref se almacenan en el$refsobjeto de la instancia del componente:

Ejemplo

<template>
  <div>
    <input type="text" ref="inputField" />
    <button @click="focusInput">Enfocar el campo de entrada</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
// Acceder al elemento DOM a través de $refs
      this.$refs.inputField.focus()
    }
  }
}
</script>

2. Uso de ref en Composition API

En Composition API, se recomienda usaruseTemplateRefpara obtener la referencia de plantilla:

Ejemplo

<template>
  <div>
    <input type="text" ref="inputField" />
    <button @click="focusInput">Enfocar el campo de entrada</button>
  </div>
</template>

<script setup>
import { useTemplateRef } from 'vue'

// Crear una referencia que coincida con el nombre ref en la plantilla
const inputField = useTemplateRef('inputField')

function focusInput() {
// Acceder directamente al elemento DOM
  inputField.value?.focus()
}
</script>

Casos de uso

1. Acceso a elementos DOM

Usando ref se puede acceder directamente a los elementos DOM, realizar operaciones como control de foco, obtención de valores, etc.:

Ejemplo

<template>
  <div>
    <input type="text" ref="username" placeholder="Nombre de usuario" />
    <button @click="getValue">Obtener valor</button>
  </div>
</template>

<script>
export default {
  methods: {
    getValue() {
// Obtener el valor del campo de entrada
      const value = this.$refs.username.value
console.log('Valor ingresado:', value)
    }
  }
}
</script>

2. Acceso a instancias de componentes hijos

Usando ref se puede acceder a la instancia del componente hijo, llamar a sus métodos o acceder a sus datos:

Ejemplo

<!-- Componente padre -->
<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="callChildMethod">Llamar al método del componente hijo</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
// Llamar al método del componente hijo
      this.$refs.childRef.sayHello()
// Acceder a los datos del componente hijo
console.log('Datos del componente hijo:', this.$refs.childRef.message)
    }
  }
}
</script>

3. ref funcional

ref también puede aceptar una función, que se llamará en cada actualización, permitiendo controlar completamente la ubicación de almacenamiento de la referencia:

Ejemplo

<template>
  <div>
    <input type="text" :ref="el => inputEl = el" />
    <button @click="focusInput">Enfocar</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputEl: null
    }
  },
  methods: {
    focusInput() {
      this.inputEl?.focus()
    }
  }
}
</script>

Precauciones

Momento de registro de refDebido a que las refs se crean a partir del resultado de la función de renderizado, solo se puede acceder a ellas después de que el componente esté montado. Si se accede en loscreatedganchos del ciclo de vida,$refstodavía será un objeto vacío.

No reactiva：$refsEs no reactiva, por lo tanto no debe usarse en la plantilla para el enlace de datos. Solo úsala en JavaScript para operaciones DOM.

Evita abusar de refEn la medida de lo posible, opera el DOM y los componentes hijos mediante la conducción de datos y el manejo de eventos. El uso excesivo de ref puede hacer que el código sea difícil de mantener.

Ejemplo

<!-- No recomendado: acceder a ref en created -->
<script>
export default {
  created() {
    console.log(this.$refs.inputField) // undefined
  },
  mounted() {
console.log(this.$refs.inputField) // se puede acceder
  }
}
</script>

Uso con v-for

ref también se puede usar env-for, lo que crea un array que contiene todos los elementos DOM o instancias de componentes correspondientes:

Ejemplo

<template>
  <div>
    <div v-for="(item, index) in items" :key="item.id" :ref="el => setItemRef(el, index)">
      {{ item.name }}
    </div>
    <button @click="logRefs">Imprimir todas las referencias</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
{ id: 1, name: 'Proyecto uno' },
{ id: 2, name: 'Proyecto dos' },
{ id: 3, name: 'Proyecto tres' }
      ],
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el, index) {
      if (el) {
        this.itemRefs[index] = el
      }
    },
    logRefs() {
console.log('Todas las referencias:', this.itemRefs)
    }
  }
}
</script>

Vue3 内置属性Atributos integrados de Vue3

Otras extensiones