<Teleport> ngrenderake markup saka komponen ing panggonan liyane ing DOM tinimbang ing ngendi dideklarasikake ing treehing komponen - lan tetep minangka bagian logis saka komponen (reaktivitas, props, events kabeh isih bisa digunakake).
Modals, tooltips, lan notifikasi asring kudu dadi kanggo ngindhari masalah CSS — , , utawa konteks stacking saka parente bisa geser utawa salah tumpuk modal. Nanging sacara logis, modal kuwi klebu ing komponen sing ngetrigger.
<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 modal iku pindhah dadi anak saka <body> ing DOM nyata, lolos saka parenthe sing ngjepit/stacking — nanging open, @click, lan kabeh props tetep reaktif, amarga sacara logis isih bagian saka komponen iki.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Dengan lolos saka ancestore sing ngjepit, modal bisa kanthi andal nutup kabeh viewport lan dumunung ndhuwur kabeh konten liyane kanthi z-index sing bisa diperkirakake.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport ngatasi kanthi bersih masalah CSS klasik saka overlays (modals, tooltips, toasts, dropdowns) sing dijepit utawa salah tumpuk dening ancestore DOM-ne.
Kulina ngarang overlay ing ngendi iku sacara logis kudu manggon (ing komponen sing ngetrigger, kanthi reaktivitas lengkap) sementara ngrenderakake ing ngendi iku kudu manggon ing DOM (biasane <body>).
Iku equivalen Vue sing built-in saka React portals — cara standar lan kuwat kanggo ndbangun overlay UI.