<Teleport> renderuje markup komponentu w innym miejscu w DOM niż tam, gdzie jest deklarowany w drzewie komponentów — ale logicznie pozostaje częścią komponentu (reaktywność, props, zdarzenia wciąż działają).
Modale, tooltips i powiadomienia często muszą być , aby uniknąć problemów z CSS — , lub stacking context elementu nadrzędnego może obciąć lub nieprawidłowo warstwować modal. Ale logicznie modal należy do komponentu, który go uruchamia.
<body>overflow: hiddentransformz-index<template>
<button @click="open = true">Open Modal</button>
<Teleport to="body"> <!-- render this elsewhere... -->
<div v-if="open" class="modal-overlay">
<div class="modal">
<p>I'm declared inside this component...</p>
<p>...but rendered as a child of <body>!</p>
<button @click="open = false">Close</button>
</div>
</div>
</Teleport>
</template>
Markup modalu jest przenoszony, aby być dzieckiem <body> w rzeczywistym DOM, unikając wszelkich ścieżek/warstw elementów nadrzędnych — jednak open, @click i wszystkie props pozostają w pełni reaktywne, ponieważ logicznie jest to nadal część tego komponentu.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Przez ucieczką od zaklętych przodków, modal może niezawodnie pokryć całą rzednią widoku i siedzieć nad całą inną zawartością z przewidywalnym z-index.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport czystym sposobem rozwiązuje klasyczny problem CSS polegający na tym, że nakładki (modalne, tooltips, toasty, rozwijane) są obcinane lub nieprawidłowo rozmieszczane przez ich przodków DOM.
Umożliwia ci tworzenie nakładki tam, gdzie logicznie się należy (wewnątrz komponentu uruchamiającego, z pełną reaktywnością), podczas gdy renderujesz ją tam, gdzie powinna być w DOM (zwykle <body>).
Jest wbudowanym odpowiednikiem Teleport portali React — standardowy, solidny sposób budowania interfejsu użytkownika nakładek.