તમે કસ્ટમ ડિરેક્ટિવ કેવી રીતે બનાવો છો?

Question

Accepted Answer

**કસ્ટમ ડિરેક્ટિવ** તમને **નીચલા-સ્તરના DOM મેનિપ્યુલેશન** ને પુનઃવર્તનીય `v-*` વિશેષતા તરીકે એનકેપ્સ્યુલેટ કરવા દે છે. તેનો ઉપયોગ કરો જ્યારે તમને એલિમેન્ટમાં સીધી પ્રવેશાધિકાર જરૂરી હોય (focus, scroll, ત્રીજા-પક્ષ DOM લાઇબ્રેરી) — એવી વસ્તુઓ જે ઘટકો/પ્રોપ્સ સ્વાભાવિક રીતે આવરી લેતા નથી. ## સ્થાનિક ડિરેક્ટિવ વ્યાખ્યાયિત કરવું ```vue ``` નામકરણ સંમેલન: એક ચલ `vFocus` ડિરેક્ટિવ `v-focus` બને છે. ## ડિરેક્ટિવ હુક (ઘટક જીવનચક્ર મિરર) ```js const vDemo = { created(el, binding) {}, // before attributes/listeners applied mounted(el, binding) {}, // element inserted into the DOM updated(el, binding) {}, // after the containing component updates unmounted(el) {}, // element removed — clean up here }; ``` ## બાઇન્ડિંગ મૂલ્ય અને દલીલનો ઉપયોગ કરવો ```vue ``` `binding` ઑબ્જેક્ટ `value` (અભિવ્યક્તિ), `arg` (કોલોનની પછીથી), `modifiers` (બિંદુઓની પછીથી), અને `oldValue` વહન કરે છે. ## એક વ્યવહારિક ઉદાહરણ: click-outside ```js const vClickOutside = { mounted(el, binding) { el._handler = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener("click", el._handler); }, unmounted(el) { document.removeEventListener("click", el._handler); // cleanup! }, }; // usage:

...

``` ## વૈશ્વિક નિબંધન ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## તે શા માટે મહત્વપૂર્ણ છે કસ્ટમ ડિરેક્ટિવ **પુનઃવર્તનીય, નીચલા-સ્તરના DOM વર્તન** માટે યોગ્ય સાધન છે — autofocus, click-outside, લેઝી-લોડીંગ છબીઓ, ટૂલટિપ્સ, બિન-Vue DOM લાઇબ્રેરી એકીકરણ. તેઓ આવા આવશ્યક DOM તર્કને કैپ્સ્યુલેટેડ અને ઘોષણાત્મક (`v-click-outside`) રાખે છે જે જીવનચક્ર હુક્સમાં વિખેરાયેલા નથી. હુક્સ અને `binding` ઑબ્જેક્ટ (value/arg/modifiers) જાણવું, વતન `unmounted` માં સાફ કરવું, તેમના વ્યવહારિક ઉપયોગને આવરી લે છે — જો કે મોટા ભાગના UI તર્કમાં, ઘટકો હજી પણ બહેતર પસંદ છે.