Mari bercakap tentang ciri berguna dalam Vue3: Teleport

Ciri baharu ve3 telah dibincangkan sejak sekian lama, iaitu Portals(portal), fungsinya adalah untuk mengalihkan HTML templat ke tempat yang berbeza dalam DOM. Portals ialah ciri biasa dalam React dan pustaka portal-vue boleh digunakan dalam Vue2. (Belajar perkongsian video: tutorial video vue)

Vue3 menyediakan Teleport untuk menyokong fungsi ini.

Tujuan Teleport

Perkara pertama yang saya perlu faham ialah bila hendak menggunakan fungsi Teleport.

Apabila bekerja dengan projek Vue yang lebih besar, adalah penting untuk mempunyai cara yang logik untuk mengatur pangkalan kod anda. Walau bagaimanapun, apabila berurusan dengan jenis komponen tertentu, seperti modal, pemberitahuan atau gesaan, logik untuk HTML templat mungkin berada dalam fail yang berbeza daripada tempat yang kita mahukan elemen itu dipaparkan.

Sebenarnya, selalunya, lebih mudah untuk mengurus elemen ini apabila dikendalikan secara berasingan daripada DOM aplikasi Vue kami. Semua ini adalah kerana berurusan dengan kedudukan komponen bersarang, z-index dan gaya boleh menjadi rumit kerana berurusan dengan skop semua ibu bapa mereka.

Di sinilah Teleport berguna. Kita boleh menulis kod templat dalam komponen di mana logiknya, yang bermaksud kita boleh menggunakan data komponen atau props. Walau bagaimanapun, ia kemudiannya dipaparkan sepenuhnya di luar skop aplikasi Vue kami.

Tanpa menggunakan Teleport kita perlu risau tentang penyebaran peristiwa yang menghantar logik daripada komponen anak ke atas pokok DOM, tetapi kini ia lebih mudah.

Cara Teleport Vue berfungsi

Andaikan kita mempunyai beberapa komponen kanak-kanak di mana kita ingin mencetuskan pemberitahuan timbul. Seperti yang baru dibincangkan, adalah lebih mudah jika pemberitahuan dipaparkan dalam pepohon DOM yang berasingan sepenuhnya, berbanding elemen #app akar Vue.

Perkara pertama yang perlu kita lakukan ialah membuka index.html kami dan menambah

Atas ialah kandungan terperinci Mari bercakap tentang ciri berguna dalam Vue3: Teleport. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!