Kaip sukurti pasirinktinę direktyvą?

Question

Accepted Answer

**Pasirinktinės direktyvos** leidžia jums **žemo lygio DOM manipuliaciją** inkapsuliuoti kaip pakartotinai panaudojamą `v-*` atributą. Naudokite jas, kai jums reikalingas tiesioginis prieiga prie elemento (focus, scroll, trečiųjų šalių DOM bibliotekos) — dalykus, kuriuos komponentai/props natūraliai neapima. ## Vietinės direktyvos apibrėžimas ```vue ``` Įvardijimo konvencija: kintamasis `vFocus` tampa direktyva `v-focus`. ## Direktyvos hook'ai (atspindi komponento gyvenimo ciklą) ```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 }; ``` ## Surišimo vertės ir argumento naudojimas ```vue ``` Objektas `binding` turi `value` (išraišką), `arg` (po dvitaškio), `modifiers` (po taškų), ir `oldValue`. ## Praktinis pavyzdys: 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:

...

``` ## Pasaulinė registracija ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Kodėl tai svarbu Pasirinktinės direktyvos yra tinkamas įrankis **pakartotinai panaudojamam, žemo lygio DOM elgesiui** — autofocus, click-outside, vaizdų lėtam įkrovimui, tooltip'ams, ne-Vue DOM bibliotekų integravimui. Jie tokią imperatyvią DOM logiką saugo ir daro deklaratyvią (`v-click-outside`), o ne ją išbarstant gyvenimo ciklo hook'uose. Žinodami hook'us ir `binding` objektą (value/arg/modifiers), be valymo `unmounted`-oje, padengiate jų praktinį naudojimą — nors daugeliui UI logikos, komponentai vis dar yra geresnė pasirinkti.