Veja nesse artigo
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