Wie erstellen Sie eine benutzerdefinierte Direktive?

Question

Accepted Answer

**Custom directives** ermöglichen es dir, **DOM-Manipulation auf niedriger Ebene** als ein wiederverwendbares `v-*` Attribut zu kapseln. Verwende sie, wenn du direkten Zugriff auf ein Element benötigst (Fokus, Scroll, DOM-Bibliotheken von Drittanbietern) — Dinge, die Components/Props nicht natürlicherweise abdecken. ## Definieren einer lokalen Direktive ```vue ``` Namenskonvention: Eine Variable `vFocus` wird zur Direktive `v-focus`. ## Directive hooks (spiegeln den Component-Lebenszyklus) ```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 }; ``` ## Verwendung des Binding-Werts und Arguments ```vue ``` Das `binding`-Objekt enthält `value` (den Ausdruck), `arg` (nach dem Doppelpunkt), `modifiers` (nach den Punkten) und `oldValue`. ## Ein praktisches Beispiel: 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:

...

``` ## Globale Registrierung ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Warum es wichtig ist Custom directives sind das richtige Werkzeug für **wiederverwendbares, DOM-Verhalten auf niedriger Ebene** — autofocus, click-outside, lazy-loading von Bildern, Tooltips, Integration von nicht-Vue DOM-Bibliotheken. Sie halten solch imperative DOM-Logik gekapselt und deklarativ (`v-click-outside`), anstatt sie in Lifecycle Hooks zu verstreuen. Kenntnisse der Hooks und des `binding`-Objekts (value/arg/modifiers) plus Bereinigung in `unmounted` decken ihre praktische Verwendung ab — obwohl Components für die meiste UI-Logik immer noch die bessere Wahl sind.