<Teleport> Teleportar para Outra Posição do DOM
Última atualização: 2026-10-22
<Teleport> Teleportar para Outra Posição do DOM
O
| Grupo | Integrados |
|---|---|
| Tipo | Componente / Elemento |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<Teleport to="body">
<div class="modal">Conteúdo do modal</div>
</Teleport>⚙️ Argumentos
| props | to (seletor CSS ou elemento) / disabled (desativa a teleporte) |
|---|
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The modal mounts under body, escaping the #app container.💡 Pontos-chave
ℹ️ Nota Logicamente continua sendo filho do componente: props, eventos e relações provide/inject permanecem inalterados.
💡 Dica Prefira teleportar para o body ou um contêiner dedicado de camadas, evitando interferência de overflow/z-index dos ancestrais.
ℹ️ Nota A ordem de múltiplos Teleports pode ser controlada com v-if; disabled renderiza no lugar temporariamente.
🏷️ Integrados relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Por que os modais são cortados?
R Ancestrais com overflow:hidden ou transform criam um novo contexto de empilhamento; teleportar para o body contorna isso.
P Os eventos ainda borbulham pela árvore de componentes?
R Eventos de DOM borbulham pelo DOM real, mas os eventos de componente Vue e a reatividade permanecem inalterados.
P Posso teleportar para um contêiner específico?
R Sim: to="#modal-root", garantindo antes que o elemento alvo exista.
