Hvordan oppretter du en egendefinert direktiv?

Question

Accepted Answer

**Egendefinerte direktiver** lar deg innkapsle **DOM-manipulering på lavt nivå** som et gjenbrukbart `v-*`-attributt. Bruk dem når du trenger direkte tilgang til et element (fokus, scroll, tredjepartsbiblioteker for DOM) — ting som komponenter/props ikke naturlig dekker. ## Definer et lokalt direktiv ```vue ``` Navnekonvensjonen: en variabel `vFocus` blir direktivet `v-focus`. ## Direktiv hooks (speiler komponentens livssyklus) ```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 }; ``` ## Bruk bindingsverdien og argumentet ```vue ``` `binding`-objektet har `value` (uttrykket), `arg` (etter kolontegnet), `modifiers` (etter punkter), og `oldValue`. ## Et 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 betyr noe Egendefinerte direktiver er det riktige verktøyet for **gjenbrukbar DOM-atferd på lavt nivå** — autofokus, click-outside, lazy-loading av bilder, tooltips, integrering av DOM-biblioteker som ikke er Vue. De holder slik imperativ DOM-logikk innkapslet og deklarativ (`v-click-outside`) i stedet for spredt i livssyklushooks. Å kjenne hooks og `binding`-objektet (verdi/arg/modifiers), pluss opprydding i `unmounted`, dekker praktisk bruk — selv om komponenter fortsatt er det bedre valget for det meste av UI-logikk.