Hur skapar du ett anpassat direktiv?

Question

Accepted Answer

**Anpassade direktiv** låter dig kapsla in **DOM-manipulering på låg nivå** som ett återanvändbart `v-*`-attribut. Använd dem när du behöver direkt åtkomst till ett element (fokus, scroll, DOM-bibliotek från tredje part) — saker som komponenter/props inte naturligt täcker. ## Definiera ett lokalt direktiv ```vue ``` Namngivningskonvention: en variabel `vFocus` blir direktivet `v-focus`. ## Direktiv hooks (speglar komponentens livscykel) ```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 }; ``` ## Använda bindningsvärdet och argumentet ```vue ``` Objektet `binding` bär `value` (uttrycket), `arg` (efter kolonet), `modifiers` (efter punkter) och `oldValue`. ## Ett praktiskt exempel: 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 ``` ## Varför det spelar roll Anpassade direktiv är rätt verktyg för **återanvändbar, låg-nivå DOM-beteende** — autofokus, click-outside, lazy-loading av bilder, tooltips, integrering av icke-Vue DOM-bibliotek. De håller sådan imperativ DOM-logik inkapsulerad och deklarativ (`v-click-outside`) snarare än spridd i livscykelhooks. Att kunna hooks och `binding`-objektet (value/arg/modifiers), plus städning i `unmounted`, täcker deras praktiska användning — även om komponenter fortfarande är det bättre valet för de flesta UI-logik.