რა არის Teleport კომპონენტი?

Question

Accepted Answer

`` აწერთებს კომპონენტის მარკაპს **DOM-ის სხვა ადგილას**, სადაც ის დეკლარირებული არის თქვენი კომპონენტის ხეში — მაგრამ ის ლოგიკურად კომპონენტის ნაწილი რჩება (რეაქტიულობა, props, მოვლენები ყველა კვლავ მუშაობს). ## რატომ მნიშვნელოვანია ეს მოდალური ფანჯრები, ხელმოწერები და შეტყობინებები ხშირად უნდა იყვნენ **``-ის პირდაპირი შვილი**, რათა თავიდან აიცილონ CSS-ის პრობლემები — მშობლის `overflow: hidden`, `transform` ან `z-index` გროვის კონტექსტი შეიძლება მოდალურ ფანჯარაზე გავლენა მოახდინოს. მაგრამ ლოგიკურად, მოდალური ფანჯარა იმ კომპონენტს ეკუთვნის, რომელიც მას აქტივირებს. ## Teleport-ის გამოყენება ```vue ``` მოდალური ფანჯრის მარკაპი **გადააქვს** ``-ის შვილად ნამდვილი DOM-ში, გაურბის რაიმე მოჭრის/გროვის მშობელს — მაგრამ `open`, `@click` და ნებისმიერი props სრულად რეაქტიულია, რადგან ლოგიკურად კვლავ ამ კომპონენტის ნაწილია. ## რატომ "to body" ამოწყობს განალაგების ბაგებს ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` თავი აღმავალი წინაპრებიდან რომ დაძევოს, მოდალური ფანჯარა შეუძლია საიმედოდ დაფაროს მთელი ხილვის ფართობი და დგეს ყველა სხვა შინაარსის ზემოთ ნათელი `z-index`-ით. ## სამიზნე შეიძლება იყოს ნებისმიერი სელექტორი ```vue ... ... ``` ## რატომ მნიშვნელოვანია ეს Teleport წმენდილად წყვეტს CSS-ის კლასიკურ პრობლემას ზღვრებით (მოდალები, ხელმოწერები, თოსტები, ჩამწკის სიები), რომლებიც ზღვრულ ხეში მოჭრილი ან ცუდად დაშორებული იყო. ეს საშუალებას გაძლევთ დაწერეთ ზღვარი იქ, სადაც ის ლოგიკურად უნდა იყოს (აქტივირების კომპონენტის შიგნით, სრულ რეაქტიულობით), სანამ იგი რენდერდება იქ, სადაც ის DOM-ში უნდა იყოს (ჩვეულებრივ ``). ეს Vue-ის ჩაშენებული ეკვივალენტია React-ის პორტალებისა — სტანდარტული, მძიმე გზა ზღვრის UI-ის ასაგებად.