آپ ایک کسٹم directive کیسے بناتے ہیں؟

Question

Accepted Answer

**Custom directives** آپ کو **low-level DOM manipulation** کو ایک قابلِ استعمال `v-*` attribute کے طور پر encapsulate کرنے دیتے ہیں۔ انہیں استعمال کریں جب آپ کو element تک براہِ راست رسائی کی ضرورت ہو (focus، scroll، third-party DOM libraries) — وہ چیزیں جو components/props قدرتی طور پر cover نہیں کرتے۔ ## ایک مقامی directive کی تعریف کریں ```vue ``` نام رکھنے کا طریقہ: ایک variable `vFocus` directive `v-focus` بن جاتا ہے۔ ## Directive hooks (component lifecycle کو عکاسی کریں) ```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 }; ``` ## Binding value اور argument کو استعمال کرنا ```vue ``` `binding` object میں `value` (expression)، `arg` (colon کے بعد)، `modifiers` (dots کے بعد)، اور `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 ``` ## یہ اہم کیوں ہے Custom directives **قابلِ استعمال، low-level DOM behavior** کے لیے صحیح ابزار ہیں — autofocus، click-outside، lazy-loading images، tooltips، non-Vue DOM libraries کو integrate کرنا۔ وہ اس طرح کی imperative DOM logic کو encapsulated اور declarative (`v-click-outside`) رکھتے ہیں بجائے lifecycle hooks میں بکھرے ہوئے۔ Hooks اور `binding` object (value/arg/modifiers) کو جاننا، اور `unmounted` میں صفائی کرنا، ان کے عملی استعمال کو cover کرتا ہے — اگرچہ زیادہ تر UI logic کے لیے، components اب بھی بہتر انتخاب ہیں۔