Hvordan opretter du en brugerdefineret direktiv?

Question

Accepted Answer

**Custom directives** lader dig indkapsle **DOM-manipulation på lavt niveau** som et genanvendeligt `v-*` attribut. Brug dem, når du har brug for direkte adgang til et element (fokus, scroll, tredjepartsbiblioteker til DOM) — ting som components/props ikke naturligt dækker. ## Definering af lokal direktiv ```vue ``` Navnekonvention: en variabel `vFocus` bliver direktivet `v-focus`. ## Directive hooks (spejler komponentens livscyklus) ```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 }; ``` ## Brug af binding value og argument ```vue ``` `binding`-objektet bærer `value` (udtrykket), `arg` (efter kolonet), `modifiers` (efter punkter) og `oldValue`. ## Praktisk eksempel: 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:

...

``` ## Global registrering ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Hvorfor det betyder noget Custom directives er det rigtige værktøj til **genanvendeligt, DOM-adfærd på lavt niveau** — autofocus, click-outside, lazy-loading af billeder, tooltips, integration af ikke-Vue DOM-biblioteker. De holder sådan imperativ DOM-logik indkapslet og deklarativ (`v-click-outside`) i stedet for spredt i lifecycle hooks. Kendskab til hooks og `binding`-objektet (value/arg/modifiers), plus rengøring i `unmounted`, dækker deres praktiske brug — selvom components for det meste UI-logik stadig er det bedre valg.