Jak utworzyć niestandardową dyrektywę?

Question

Accepted Answer

**Niestandardowe dyrektywy** pozwalają Ci hermetyzować **manipulację DOM na niskim poziomie** jako atrybutu wielokrotnego użytku `v-*`. Używaj ich, gdy potrzebujesz bezpośredniego dostępu do elementu (fokus, przewijanie, biblioteki DOM stron trzecich) — rzeczy, które komponenty/props naturalnie nie obejmują. ## Definiowanie lokalnej dyrektywy ```vue ``` Konwencja nazewnictwa: zmienna `vFocus` staje się dyrektywą `v-focus`. ## Hooki dyrektyw (odzwierciedlające cykl życia komponentu) ```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 }; ``` ## Używanie wartości powiązania i argumentu ```vue ``` Obiekt `binding` przenosi `value` (wyrażenie), `arg` (po dwukropku), `modifiers` (po kropkach) i `oldValue`. ## Praktyczny przykład: 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:

...

``` ## Globalna rejestracja ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Dlaczego to ważne Niestandardowe dyrektywy to odpowiednie narzędzie dla **wielokrotnie używanego, niskopoziomowego zachowania DOM** — autofokus, click-outside, leniwe ładowanie obrazów, etykietki, integracja bibliotek DOM spoza Vue. Zachowują taką imperatywną logikę DOM hermetyzowaną i deklaratywną (`v-click-outside`) zamiast rozproszonej w haków cyklu życia. Znajomość haków i obiektu `binding` (wartość/arg/modifiers), plus czyszczenie w `unmounted`, obejmuje ich praktyczne zastosowanie — choć dla większości logiki UI komponenty są nadal lepszym wyborem.