Hogyan hozza létre az egyéni direktívát?

Question

Accepted Answer

Az **egyéni direktívák** lehetővé teszik, hogy **alacsony szintű DOM-manipulációt** újrafelhasználható `v-*` attribútumként foglaljon össze. Használja őket, amikor közvetlenül szüksége van egy elemhez való hozzáférésre (focus, scroll, harmadik féltől származó DOM könyvtárak) — olyan dolgokra, amelyeket az alkatrészek/props természetesen nem fednek le. ## Helyi direktíva meghatározása ```vue ``` A nómenklatúra konvenció: a `vFocus` változó a `v-focus` direktívává válik. ## Direktíva horogpontok (alkatrész életciklus tükre) ```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 }; ``` ## A kötési érték és argumentum használata ```vue ``` A `binding` objektum hordozza a `value` (kifejezés), `arg` (kettőspont után), `modifiers` (pontok után) és `oldValue` elemeket. ## Gyakorlati példa: 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ális regisztráció ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Miért fontos ez Az egyéni direktívák a megfelelő eszköz az **újrafelhasználható, alacsony szintű DOM-viselkedéshez** — autofocus, click-outside, lusta képbetöltés, tooltipek, nem-Vue DOM könyvtárak integrálása. Így tartja az ilyen imperatív DOM logikát lezártan és deklaratívan (`v-click-outside`), ahelyett, hogy szétszórtan maradna az életciklus-horogpontokban. A horogpontok és a `binding` objektum (value/arg/modifiers) ismerete, valamint a `unmounted` alkalmazottsá tisztítása, lefedi gyakorlati felhasználásukat — bár a legtöbb UI logika esetében az alkatrészek még mindig a jobb választás.