আপনি কীভাবে একটি কাস্টম directive তৈরি করেন?

Question

Accepted Answer

**Custom directives** আপনাকে **নিম্ন-স্তরের DOM ম্যানিপুলেশন** কে একটি পুনঃব্যবহারযোগ্য `v-*` attribute হিসাবে এনক্যাপসুলেট করতে দেয়। সেগুলি ব্যবহার করুন যখন আপনার একটি উপাদানে সরাসরি অ্যাক্সেস প্রয়োজন (ফোকাস, স্ক্রল, তৃতীয় পক্ষের DOM লাইব্রেরি) — এমন জিনিস যা components/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, অ-Vue DOM লাইব্রেরি একীকরণ। তারা এই ইম্পেরেটিভ DOM লজিক এনক্যাপসুলেট এবং ডিক্লেরেটিভ (`v-click-outside`) রাখে লাইফসাইকেল হুকগুলিতে ছড়িয়ে দেওয়ার পরিবর্তে। hooks এবং `binding` অবজেক্ট (value/arg/modifiers) জানা, সাথে `unmounted` এ পরিচ্ছন্নতা, তাদের ব্যবহারিক ব্যবহার কভার করে — যদিও বেশিরভাগ UI লজিকের জন্য, components এখনও ভাল পছন্দ।