Πώς δημιουργείτε ένα προσαρμοσμένο directive;

Question

Accepted Answer

**Custom directives** σας επιτρέπουν να ενθυλακώσετε **χειρισμό DOM χαμηλού επιπέδου** ως ένα επαναχρησιμοποιήσιμο `v-*` χαρακτηριστικό. Χρησιμοποιήστε τα όταν χρειάζεστε άμεση πρόσβαση σε ένα στοιχείο (εστίαση, κύλιση, βιβλιοθήκες DOM τρίτου μέρους) — πράγματα που τα components/props δεν καλύπτουν φυσικά. ## Ορισμός ενός τοπικού directive ```vue ``` Σύμβαση ονοματοδοσίας: μια μεταβλητή `vFocus` γίνεται το directive `v-focus`. ## Directive hooks (αντικατοπτρίζουν τον κύκλο ζωής του component) ```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`) αντί να είναι διασκορπισμένη σε lifecycle hooks. Η γνώση των hooks και του αντικειμένου `binding` (value/arg/modifiers), συν ο καθαρισμός στο `unmounted`, καλύπτει τη πρακτική τους χρήση — αν και για τη δية UI λογικής, τα components παραμένουν η καλύτερη επιλογή.