<Teleport> paraqet markupin e komponentës në një vend tjetër në DOM sesa në vend ku është deklaruar në pemën e komponentëve tuaja — ndërkohë që mbetet logjikisht pjesë e komponentes (reaktiviteti, propsit, ngjarjet të gjitha akoma funksionojnë).
Modalët, tooltipsat dhe notifikat shpesh duhet të jenë për të shmangur problemet CSS — një prind's , , ose konteksti stacking mund të prerë ose keqvendosë një modal. Por logjikisht, modali i përket komponentës që e përmbysin.
<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>
Markupi modal është zhvendosur për të qenë fëmija i <body> në DOM-in e vërtetë, duke shmangur prindërit që bëjnë prerjeje/stacking — megjithatë open, @click, dhe çdo prop mbetet plotësisht reaktiv, sepse logjikisht është akoma pjesë e kësaj komponente.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Duke shmangur paraardhësit bllokues, modali mund të mbulojë në mënyrë të besueshme të gjithë viewport-in dhe të ulet mbi të gjithë përmbajtjen tjetër me një z-index të parashikueshëm.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport zgjidh në mënyrë të pastër problemin klasik të CSS-it të shtresave (modalë, tooltipsa, tostas, zbritje) që priten ose keqvendosen nga DOM paraardhësit e tyre.
Ju lejon të shkruani shtresën ku logjikisht i përket (brenda komponentës që e aktivizon, me reaktivitet të plotë) ndërkohë që e paraqitni ku duhet të jetë në DOM-in (zakonisht <body>).
Ishte ekuivalenti i ndërtuar në Vue i React portaleve — mënyra standarde, e fuqishme për të ndërtuar UI të shtresuar.