كيف تنشئ directive مخصصة؟

Question

Accepted Answer

**Custom directives** تسمح لك بـ **تغليف معالجة DOM منخفضة المستوى** كـ `v-*` attribute قابل لإعادة الاستخدام. استخدمها عندما تحتاج إلى الوصول المباشر إلى عنصر (التركيز، التمرير، مكتبات DOM للجهات الخارجية) — أشياء لا تغطيها المكونات والـ props بشكل طبيعي. ## تعريف directive محلي ```vue ``` اتفاقية التسمية: متغير `vFocus` يصبح directive `v-focus`. ## Directive hooks (تعكس دورة حياة المكون) ```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` يحمل `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 ``` ## لماذا يهم هذا Custom directives هي الأداة المناسبة لـ **سلوك DOM منخفض المستوى وقابل لإعادة الاستخدام** — autofocus، click-outside، lazy-loading للصور، tooltips، تكامل مكتبات DOM غير Vue. تحافظ على هذا المنطق الحتمي DOM مغلفاً وتعريفياً (`v-click-outside`) بدلاً من تفريقه في lifecycle hooks. معرفة hooks و كائن `binding` (value/arg/modifiers)، بالإضافة إلى التنظيف في `unmounted`، تغطي استخدامهم العملي — رغم أنه بالنسبة لمعظم منطق واجهة المستخدم، المكونات لا تزال الخيار الأفضل.