Vue 3 teleport
- Vue 3 teleport es otra de las nuevas características para hacernos la vida más sencilla en determinadas situaciones.
- Como pone en la documentación, Vue recomienda encapsular la presentación y el comportamiento en componentes. Desde el punto de vista técnico esto es genial, pero hay veces que a nivel de estructura y estilos lo mejor sería tener dos partes separadas.
- Uno de los casos más típicos son los componentes modales. Lo idea es mantenerlos lo más encapsulados posibles (todo en el mismo componente), pero por las características de posicionamiento CSS y su herencia y cascada esto resulta complicado.
- En nuestro ejemplo tenemos un componente llamado
ModalComponent.vue
que tiene un botón que conmuta su visualización. Usamosposition:absolute
en el elemento que contiene el texto para colocarlo en el centro de la pantalla, contando con que la referencia serábody
pero, ¿ qué ocurre si hay otros estilos que interfieren?. - Por ejemplo, supongamos que hay un elemento que envuelve toda la aplicación y que tiene
relative
como valor deposition
. - Todo se va al traste. Podemos arreglarlo jugando con
z-index
o con el tamaño de altura y volvería a funcionar, pero ya sabes que esto suele ser mala idea ya que para arreglar un problema estás creando otros más. - Además habría situaciones más complicadas de solucionar aún. Imagina que el elemento principal tuviera un filtro aplicado o fuese transparente.
- En lugar de trastear con el código tratando de neutralizar los estilos heredados podemos usar
teleport
. Como el nombre indica permite definir la lógica en un sitio pero presentarlo en otro lugar, aunque físicamente ambas partes estén en el mismo documento. - Si envolvemos nuestro elemento con clase
modal
enteleport
y a través de su atributoto
indicamos que lo queremos teletransportar abody
.
<teleport to="body"> // Indicamos dónde queremos "teletransportarlo"
<div class="modal" v-if="modalOpen">
<h2>Modal title</h2>
...
<button @click="modalOpen = false">Close modal</button>
</div>
</teleport>
- Importante recalcar que sólo podemos teletransportar elementos fuera del elemento al que se ancla la instancia princial de Vue, generalmente con id
#app
. - Independientemente, una vez establecido el teleport, problema solucionado.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿Tienes alguna pregunta sobre esta lección de Vue 3, Conoce todas las novedades?
Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.