<Teleport> bir bileşenin işaretlemesini bileşen ağacınızda bildirildiği yerden DOM'da farklı bir yerde işler — ancak mantıksal olarak bileşenin bir parçası olarak kalır (reaktivite, props, olaylar hepsi çalışmaya devam eder).
Modals, tooltips ve bildirimler genellikle CSS sorunlarından kaçınmak için olması gerekir — bir ebeveynin , veya yığınlama bağlamı bir modalı kırpabilir veya yanlış yerleştirebilir. Ancak mantıksal olarak, modal onu tetikleyen bileşene aittir.
<body>'nin doğrudan bir alt öğesioverflow: 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>
Modal işaretlemesi gerçek DOM'da <body>'nin bir alt öğesi olmak üzere taşınır, herhangi bir kırpma/yığınlama ebeveynini önler — ancak open, @click ve tüm props tam olarak reaktif kalır, çünkü mantıksal olarak hala bu bileşenin bir parçasıdır.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Tuzak altındaki atalardan kaçınarak, modal görüntü alanının tamamını güvenilir bir şekilde kaplayabilir ve öngörülebilir bir z-index ile diğer tüm içeriğin üzerinde oturabilir.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport, yer paylaşımlarının (modallar, tooltips, toasts, açılır menüler) DOM atalarına göre kırpılması veya yanlış yığınlanması sorunu olan klasik CSS sorununu temiz bir şekilde çözer.
Yer paylaşımını mantıksal olarak ait olduğu yerde (tetikleyen bileşenin içinde, tam reaktivite ile) yazmanıza ve DOM'da ait olması gereken yerde (genellikle <body>) işlemenize olanak tanır.
Bu, Vue'nun React portallarının yerleşik eşdeğeridir — yer paylaşımı UI'si oluşturmanın standart, sağlam yoludur.