¿Qué es el componente Teleport?

Question

Accepted Answer

`` renderiza el markup de un componente en un **lugar diferente del DOM** al que está declarado en tu árbol de componentes — mientras lo mantiene lógicamente parte del componente (reactividad, props, eventos todo sigue funcionando). ## Por qué es importante Los modales, tooltips y notificaciones a menudo necesitan ser un **hijo directo de ``** para evitar problemas CSS — el `overflow: hidden`, `transform` o contexto de apilamiento `z-index` de un padre puede recortar o desalinear mal un modal. Pero lógicamente, el modal pertenece al componente que lo dispara. ## Usando Teleport ```vue ``` El markup del modal es **movido** para ser hijo de `` en el DOM real, escapando de cualquier padre que cause recorte o apilamiento — sin embargo `open`, `@click` y cualquier prop permanecen completamente reactivos, porque lógicamente sigue siendo parte de este componente. ## Por qué "a body" arregla los bugs de layout ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Al escapar de los ancestros que atrapan, el modal puede cubrir confiablemente toda la viewport y situarse encima de todo otro contenido con un `z-index` predecible. ## El target puede ser cualquier selector ```vue ... ... ``` ## Por qué es importante Teleport resuelve limpiamente el problema clásico de CSS de que los overlays (modales, tooltips, toasts, dropdowns) sean recortados o desapilados incorrectamente por sus ancestros del DOM. Te permite escribir el overlay donde lógicamente pertenece (dentro del componente que lo dispara, con reactividad completa) mientras lo renderizas donde necesita estar en el DOM (usualmente ``). Es el equivalente built-in de Vue a los portales de React — la forma estándar y robusta de construir UI de overlay.