Jak vytvoříte vlastní direktivu?

Question

Accepted Answer

**Custom directives** vám umožňují zapouzdřit **manipulaci DOM nízké úrovně** jako opakovaně použitelný `v-*` atribut. Použijte je, když potřebujete přímý přístup k prvku (zaostření, posun, knihovny DOM třetích stran) — věci, které components/props přirozeně nepokrývají. ## Definování místní direktivy ```vue ``` Konvence pojmenování: proměnná `vFocus` se stane direktivou `v-focus`. ## Directive hooks (zrcadlí životní cyklus komponenty) ```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 }; ``` ## Používání binding value a argumentu ```vue ``` Objekt `binding` nese `value` (výraz), `arg` (za dvojtečkou), `modifiers` (za tečkami) a `oldValue`. ## Praktický příklad: 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:

...

``` ## Globální registrace ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Proč to důležité Custom directives jsou správným nástrojem pro **znovupoužitelné, nízko-úrovňové chování DOM** — autofocus, click-outside, lazy-loading obrázků, tooltips, integraci mimo-Vue DOM knihoven. Uchovávají takovou imperativní DOM logiku zapouzdřenou a deklarativní (`v-click-outside`) spíše než rozptýlenou v lifecycle hooks. Znalost hooks a objektu `binding` (value/arg/modifiers), plus čištění v `unmounted`, pokrývá jejich praktické použití — přestože pro większinu UI logiky jsou components stále lepší volbou.