defineExpose y useAttrs
Exposición de elementos internos del componente con defineExpose() y uso de useAttrs() para atributos transmitidos.
defineExpose y useAttrs es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Exponer y redirigir
Dos herramientas más completan la comunicación entre componentes: defineExpose permite que el componente padre acceda al componente hijo, y useAttrs proporciona los atributos restantes que envió el padre. Ambas son habituales en componentes reutilizables.
Los componentes están cerrados de forma predeterminada
Con <script setup>, nada dentro del componente es accesible desde un ref de plantilla del componente padre. Esta encapsulación es beneficiosa, pero a veces el padre necesita legítimamente llamar a un método del hijo.
defineExpose: abrir una puerta
defineExpose publica explícitamente métodos o valores seleccionados para el componente padre. Pase un objeto con los elementos que quiera compartir.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>Llamar a métodos expuestos desde el componente padre
El componente padre obtiene el hijo mediante un ref de plantilla y llama al método expuesto. Solo son visibles las claves que se pasen a defineExpose.
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const childRef = ref()
function doReset() { childRef.value.reset() }
</script>
<template>
<Child ref="childRef" />
</template>Un ejemplo con focus
Exponer un método focus permite que el componente padre enfoque un input dentro de un componente personalizado sin romper la encapsulación.
<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>¿Qué son los atributos de propagación?
Cuando el componente padre añade a su componente un atributo que no es una prop ni un evento declarado, como class, id o data-*, se convierte en un atributo de propagación.
Leer atributos con useAttrs
useAttrs() devuelve un objeto con todos los atributos de propagación. Utilícelo cuando necesite inspeccionarlos o reubicarlos en el script.
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>Propagación automática
De forma predeterminada, Vue aplica los atributos de propagación al único elemento raíz de la plantilla. Si su componente tiene un único div raíz, el class proporcionado por el componente padre se coloca allí automáticamente.
Desactivar la propagación automática
Cuando quiera colocar los atributos en un lugar distinto de la raíz, por ejemplo, en un input interno dentro de un contenedor, desactive la propagación automática con inheritAttrs: false en un bloque script normal.
<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>Redirigir atributos con v-bind
Después de desactivar la propagación automática, redirija los atributos al elemento que elija mediante v-bind="attrs". Este es el patrón habitual para los contenedores de inputs.
<template>
<label>
<span>Name</span>
<input v-bind="attrs" />
</label>
</template>Cuándo utilizar cada uno
- defineExpose: permite que el componente padre llame a métodos del hijo mediante un ref de plantilla.
- useAttrs + inheritAttrs: false + v-bind: permite controlar exactamente dónde se colocan los atributos proporcionados por el componente padre.
Comprobación rápida
Compruebe sus conocimientos sobre expose y attrs.
Resumen
Puntos clave:
defineExposepublica métodos o valores seleccionados para el ref del componente padre.- Los atributos de propagación son atributos del componente padre que no son props ni eventos.
useAttrs()los lee; la propagación automática los dirige al elemento raíz.- Utilice
inheritAttrs: false+v-bind="attrs"para redirigirlos.
Preguntas frecuentes
¿La lección «defineExpose y useAttrs» es gratis?
Sí — el texto completo de «defineExpose y useAttrs» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «defineExpose y useAttrs»?
Exposición de elementos internos del componente con defineExpose() y uso de useAttrs() para atributos transmitidos. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «defineExpose y useAttrs»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Introducción a script setup
- defineProps y defineEmits
- defineExpose y useAttrs
- Importación y uso de composables en script setup