Apa itu komponen Teleport?

Question

Accepted Answer

`` merender markup komponen di **tempat yang berbeda dalam DOM** dari tempat di mana komponen dideklarasikan dalam pohon komponen Anda — sambil menjaganya tetap menjadi bagian logis dari komponen (reaktivitas, props, event semuanya masih berfungsi). ## Masalah yang diselesaikannya Modals, tooltips, dan notifikasi sering kali perlu menjadi **anak langsung dari ``** untuk menghindari masalah CSS — `overflow: hidden` induk, `transform`, atau konteks stacking `z-index` dapat memotong atau menumpuk salah sebuah modal. Tetapi secara logis, modal milik komponen yang memicunya. ## Menggunakan Teleport ```vue ``` Markup modal **dipindahkan** untuk menjadi anak dari `` di DOM nyata, menghindari induk manapun yang memotong/menumpuk — namun `open`, `@click`, dan props manapun tetap sepenuhnya reaktif, karena secara logis masih bagian dari komponen ini. ## Mengapa "to body" memperbaiki bug tata letak ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Dengan menghindari nenek moyang yang terperangkap, modal dapat dengan andal menutupi seluruh viewport dan duduk di atas semua konten lainnya dengan `z-index` yang dapat diprediksi. ## Target dapat berupa pemilih apa pun ```vue ... ... ``` ## Mengapa ini penting Teleport dengan bersih menyelesaikan masalah CSS klasik overlay (modals, tooltips, toasts, dropdowns) yang dipotong atau ditumpuk salah oleh nenek moyang DOM mereka. Ia memungkinkan Anda membuat overlay di mana secara logis miliknya (di dalam komponen yang memicunya, dengan reaktivitas penuh) sambil merendernya di mana ia perlu berada di DOM (biasanya ``). Ini adalah setara bawaan Vue dari React portals — cara standar, yang kuat untuk membangun UI overlay.