Bagaimana Anda membuat direktif kustom?

Question

Accepted Answer

**Direktif kustom** memungkinkan Anda untuk mengenkapsulasi **manipulasi DOM tingkat rendah** sebagai atribut `v-*` yang dapat digunakan kembali. Gunakan ketika Anda memerlukan akses langsung ke elemen (fokus, gulir, pustaka DOM pihak ketiga) — hal-hal yang tidak secara alami dicakup oleh komponen/props. ## Menentukan direktif lokal ```vue ``` Konvensi penamaan: variabel `vFocus` menjadi direktif `v-focus`. ## Hooks direktif (cerminan siklus hidup komponen) ```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 }; ``` ## Menggunakan nilai pengikatan dan argumen ```vue ``` Objek `binding` membawa `value` (ekspresi), `arg` (setelah titik dua), `modifiers` (setelah titik), dan `oldValue`. ## Contoh praktis: 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:

...

``` ## Pendaftaran global ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Mengapa ini penting Direktif kustom adalah alat yang tepat untuk **perilaku DOM yang dapat digunakan kembali dan tingkat rendah** — autofokus, click-outside, pemuatan lambat gambar, tooltip, mengintegrasikan pustaka DOM non-Vue. Mereka menjaga logika DOM imperatif tersebut tetap terkapsul dan deklaratif (`v-click-outside`) daripada tersebar di seluruh hooks siklus hidup. Mengetahui hooks dan objek `binding` (value/arg/modifiers), ditambah pembersihan di `unmounted`, mencakup penggunaan praktis mereka — meskipun untuk sebagian besar logika UI, komponen masih merupakan pilihan yang lebih baik.