Teleport கூறு என்றால் என்ன?

Question

Accepted Answer

`` ஒரு கூறின் குறிப்பை DOM-இல் **வெவ்வேறு இடத்தில்** வழங்குகிறது, அங்கு அது உங்கள் கூறு மரத்தில் அறிவிக்கப்பட்டுள்ளது — ஆனால் தர்க்கரீதியாக அது கூறின் ஒரு பகுதியாகவே இருக்கிறது (மாறன்தன்மை, குணங்கள், நிகழ்வுகள் அனைத்தும் இன்னும் செயல்படுகின்றன). ## அது தீர்க்கும் பிரச்சனை மாடல்கள், உதவிக்குறிப்புகள் மற்றும் அறிவிப்புகளுக்கு CSS சிக்கல்களைத் தவிர்க்க **`` இன் நேரடி குழந்தை** ஆக இருக்க வேண்டும் — பெற்றொருவின் `overflow: hidden`, `transform` அல்லது `z-index` அடுக்க சூழல் ஒரு மாடலைத் தقطع செய்ய அல்லது தவறாக வரிசைப்படுத்த முடியும். ஆனால் தர்க்கரீதியாக, மாடல் அதைத் தூண்டும் கூறுக்குச் சொந்தமாக உள்ளது. ## Teleport ஐ பயன்படுத்துதல் ```vue ``` மாடல் குறிப்பு **நகர்த்தப்பட்டுள்ளது**, உண்மையான DOM-இல் `` இன் குழந்தை ஆக இருக்க, தতுவ/அடுக்கிட பெற்றொருக்களைத் தவிர்க்கிறது — ஆனால் `open`, `@click` மற்றும் அனைத்து குணங்கள் முற்றிலும் மாறுநிலையுடன் இருக்கின்றன, ஏனெனில் தர்க்கரீதியாக இது இந்தக் கூறின் ஒரு பகுதியாகவே இருக்கிறது. ## ஏன் "to body" தัยமிப்பு குறைகளை சரிசெய்கிறது ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` கெட்ட முறையைத் தவிர்ப்பதன் மூலம், மாடல் நம்பிக்கையுடன் முழு viewport ஐ மூடி முடியும் மற்றும் அனைத்து பிற உள்ளடக்கத்திற்கு மேலே உட்கார முடியும் நிர்ணயிக்கக்கூடிய `z-index` உடன். ## இலக்கு எந்த தேர்வாளரும் இருக்கக்கூடும் ```vue ... ... ``` ## அது ஏன் முக்கியம் Teleport மாடல்கள், உதவிக்குறிப்புகள், toasts, கீழ்தோன்றல்கள் அவற்றின் DOM முன்னோடிகளால் வெட்டிக் குறையாதிருக்க அல்லது தவறாக அடுக்கப்பட்ட கூட கொடுக்க CSS சிக்கலின் பிரস்থान தீர்வை அளிக்கிறது. ஓவர்லே தர்க்கரீதியாக எங்கு விழ வேண்டுமோ அங்கே (தூண்டும் கூறுக்குள், முழு மாறன்தன்மையுடன்) எழுத உங்களை அனுமதிக்கிறது, இருப்பினும் அது DOM-இல் எங்கு இருக்க வேண்டுமோ அங்கே வழங்க கூடியது (பொதுவாக ``). இது Vue இன் React portals இன் கட்டமைக்கப்பட்ட சமம் — தரமான, வலிமையான வழி overlay UI ஐ உருவாக்க.