dalam VUE 3 digunakan untuk menjadikan kandungan di luar struktur DOM komponen semasa. 1. Ia membolehkan anda memindahkan elemen seperti kotak modal, alat segera ke lokasi lain di halaman untuk menyelesaikan masalah susun atur, hierarki z-indeks dan masalah aksesibiliti; 2. Apabila menggunakannya, anda perlu membungkus kandungan sasaran dan menentukan pemilih sasaran, seperti ; 3. Vue secara fizikal akan memindahkan nod DOM yang sepadan ke lokasi yang ditentukan sambil mengekalkan respons dan logik peristiwa; 4. Senario aplikasi biasa termasuk kotak modal, mesej pemberitahuan, petua dan kandungan bebas penghalang; 5. Apabila menggunakannya, anda perlu memastikan bahawa elemen sasaran sudah ada, dan perhatikan skop gaya dan pemprosesan logik dinamik. Singkatnya, mengekalkan hubungan logik pokok komponen melalui rujukan maya, memberikan penyelesaian ringkas untuk UI yang kompleks.

Dalam Vue 3, <teleport></teleport> memainkan peranan penting apabila anda perlu memberikan kandungan di luar struktur DOM komponen semasa - seperti apabila anda mahu modal atau tooltip muncul di tempat lain di halaman, walaupun ia bukan sebahagian daripada pokok komponen yang menjadikannya. Ia digunakan untuk menjadi perpustakaan berasingan yang dipanggil portalvue dalam ekosistem Vue 2, tetapi kini ia dibina terus ke Vue 3.

Apa sebenarnya <teleport></teleport> ?

Pada terasnya, <teleport></teleport> membolehkan anda memindahkan sekeping templat anda ke lokasi yang berbeza di DOM. Ini sangat berguna untuk perkara-perkara seperti modal, dropdowns, atau toolsips yang perlu keluar dari bekas induk-terutama yang overflow: hidden atau z-index .

Anda menggunakannya dengan membungkus kandungan yang anda mahu teleport dan menentukan pemilih sasaran:

 <teleport to = "#modal-root">
  <div class = "modal"> Ini akan muncul di dalam #modal-root </div>
</teleport>

Di sebalik tabir, Vue bergerak node Dom di luar komponen anda dan menambahkannya di mana anda menyuruhnya pergi - tanpa memecahkan kereaktifan atau pengendalian peristiwa.

Kes penggunaan biasa untuk teleport

• Modal dan Overlay : Ini sering perlu duduk di peringkat atas halaman supaya mereka dapat menampung segala -galanya.
• Tooltips dan Popups : Terutama berguna apabila bersarang di dalam bekas menatal.
• Pemberitahuan atau mesej roti bakar : Anda mungkin mahu ini muncul di kawasan khusus halaman, tanpa mengira di mana mereka dicetuskan dari.
• Kandungan Berkaitan Kebolehcapaian : Seperti Langkau Pautan atau Teks Pembaca Skrin sahaja yang perlu hidup di tempat tertentu.

Ini adalah semua situasi di mana rendering di dalam komponen anda akan menyebabkan masalah susun atur, sakit kepala Z-indeks, atau kebolehcapaian.

Bagaimana ia berfungsi di bawah tudung

Apabila anda menggunakan <teleport></teleport> , Vue tidak hanya memindahkan DOM - ia menyimpan sambungan logik ke komponen anda. Itu bermaksud:

• Pengikatan data masih berfungsi secara normal.
• Gelembung peristiwa seperti yang diharapkan (walaupun berhati -hati dengan peristiwa DOM asli).
• Komponen di dalam <teleport></teleport> Tetap dipasang dan reaktif.

Ia melakukan ini dengan menyimpan rujukan maya di lokasi asal sambil memberikan DOM sebenar di tempat lain. Jadi secara visual, ia berada di tempat yang baru, tetapi dari perspektif Vue, ia masih merupakan sebahagian daripada pokok komponen anda.

Satu perkara yang perlu diperhatikan: Jika anda melakukan sesuatu seperti memeriksa hubungan ibu bapa-anak DOM melalui JavaScript, DOM sebenar tidak akan sepadan dengan pokok komponen anda. Itu biasanya baik -baik saja, tetapi ia patut disedari.

Petua untuk menggunakan <teleport></teleport> dengan berkesan

• Pastikan elemen sasaran anda (seperti #modal-root ) wujud sebelum sebarang kandungan teleport cuba untuk memberi-jika tidak, Vue akan memberi amaran kepada anda dalam konsol.
• Anda boleh teleport pelbagai komponen ke sasaran yang sama; Mereka akan menyusun susunan yang diberikan.
• Elakkan meletakkan kekunci dinamik atau logik bersyarat di dalam <teleport></teleport> kecuali perlu - ia boleh merumitkan masa dan pembersihan.
• Gaya Teleported Content dengan teliti - kerana ia tinggal di luar komponen anda, modul CSS atau gaya scoped mungkin tidak terpakai seperti yang diharapkan.

Juga, perlu diingat bahawa <teleport></teleport> tidak menjejaskan kitaran hayat komponen. Komponen di dalam teleport masih dipasang dan tidak dapat dipasang berdasarkan logik aplikasi anda - hanya perubahan kedudukan DOMnya.

Pada dasarnya itu sahaja. Sebaik sahaja anda mendapat hang itu, <teleport></teleport> menjadi alat untuk menguruskan corak UI yang rumit tanpa hacks.

Atas ialah kandungan terperinci Apakah peranan (dahulunya Portalvue) dalam VUE 3 untuk memberikan kandungan di luar hierarki DOM komponen semasa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!