teleport vue 3

Vue 3 – Teleport

Introdução

O Teleport é mais uma das features do Vue 3. Basicamente falando, ele possibilita que seja renderizado um componente em outro lugar da tela.

Essa feature é interessante para usar em Modais, popups e outros componentes que precisem ser renderizados em local diferente do que está declarado.

É uma boa prática do Vue, que componentes relacionados fiquem sempre juntos, porém, há uma outra boa prática que diz que modais, popups e alguns outros componentes, devem ser renderizados antes do fechamento da tag <body>.

Com o Vue2, para fazer isso era necessário utilizar algumas bibliotecas como o vue-portal, porém com o Vue3 isso foi implementado nativamente.

Como funciona

Ele funciona de maneira parecida com o Suspense, não é necessário realizar a sua importação, basta declará-lo dentro do template que irá funcionar.

Ele também tem somente uma prop, que é a to, que indica em qual local do sistema, o componente que está dentro dele será renderizado, normalmente para o to é passado o id de uma div de outro lugar do sistema. Exemplo:

<teleport to="#modals">
  <div>A</div>
</teleport>
<teleport to="#modals">
  <div>B</div>
</teleport>

<!-- resultado-->
<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

No caso acima, as divs que contém A e B, independente de onde elas foram criadas, elas serão renderizadas dentro da div com o id modals.

O que ele resolve

Outro problema que esta feature resolve, é que o estilo de uma classe, pode interferir no modal que está dentro dela, por exemplo:

<div class="principal">
	<div class="modal"></div>
</div>

Nesse caso, a div “modal” está dentro de “principal”, caso seja colocado algum estilo css em “principal” o “modal” também seria afetado, pois está dentro de “principal”, e como com o Teleport é possível renderizar esse modal em outro lugar do sistema, essa inconsistência de estilos não irá acontecer.

Para saber mais

Esta é uma breve introdução sobre esse conteúdo, caso queira, gravei um vídeo completo com a explicação dessa funcionalidade, e com exemplo de como pode ser aplicado na prática:

Conclusão

O Teleport ajuda a solucionar alguns problemas existentes, é interessante que o Vue ohou pra isso como um problema comum do dia a dia, e resolveu implementar nativamente, sendo assim, não é mais necessário uma biblioteca ou “gambiarra” para resolver esse tipo de problema. É uma feature que agrega valor na linguagem. Espero ter ajudado, até o próximo post 🙂

Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.

Referências

https://v3.vuejs.org/guide/teleport.html

https://medium.com/@patelvivek2530/teleport-vue-3s-new-feature-a887fe05fd87

https://blog.codecasts.com.br/portal-uma-nova-feature-no-vue-3-e3564ee42666

Este conteúdo te ajudou de alguma forma?

Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok
Privacy Policy