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 ... ... ``` ## તે શા માટે મહત્વપૂર્ણ છે ટેલિપોર્ટ સ્પષ્ટપણે CSS ની શાસ્ત્રીય સમસ્યાને હલ કરે છે કે ઓવરલે (મોડલ્સ, ટૂલટિપ્સ, ટોસ્ટ્સ, ડ્રોપડાઉન્સ) તેમના DOM પૂર્વજો દ્વારા તુટી અથવા ખોટી રીતે સ્તર કરવામાં આવે છે. તે તમને ઓવરલે જ્યાં તાર્કિક રીતે જોડાયેલ છે તે જગ્યાએ (ટ્રિગર કરતા ઘટક અંદર, સંપૂર્ણ પ્રતિક્રિયાશીલતા સાથે) લખવા દે છે અને તેને DOM માં જ્યાં તેની જરૂર છે તે જગ્યાએ (સામાન્યતया ``). તે Vue ના React portals ની બિલ્ટ-ઇન સમાનતા છે — ઓવરલે UI બનાવવાનો માનક, મજબૂત માર્ગ.