Bạn tạo một custom directive như thế nào?

Question

Accepted Answer

**Custom directive** cho phép bạn đóng gói **thao tác DOM cấp thấp** thành một thuộc tính `v-*` tái sử dụng. Dùng chúng khi bạn cần truy cập trực tiếp một phần tử (focus, scroll, thư viện DOM bên thứ ba) — những thứ mà component/props không tự nhiên bao quát. ## Định nghĩa một directive cục bộ ```vue ``` Quy ước đặt tên: biến `vFocus` trở thành directive `v-focus`. ## Các hook của directive (phản chiếu lifecycle của component) ```js const vDemo = { created(el, binding) {}, // trước khi áp dụng thuộc tính/listener mounted(el, binding) {}, // phần tử được chèn vào DOM updated(el, binding) {}, // sau khi component chứa nó cập nhật unmounted(el) {}, // phần tử bị gỡ bỏ — dọn dẹp ở đây }; ``` ## Dùng giá trị binding và đối số ```vue ``` Object `binding` mang theo `value` (biểu thức), `arg` (sau dấu hai chấm), `modifiers` (sau dấu chấm), và `oldValue`. ## Một ví dụ thực tế: 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); // dọn dẹp! }, }; // dùng:

...

``` ## Đăng ký toàn cục ```js app.directive("focus", { mounted: (el) => el.focus() }); // khả dụng ở khắp nơi ``` ## Tại sao điều này quan trọng Custom directive là công cụ đúng đắn cho **hành vi DOM cấp thấp, tái sử dụng** — autofocus, click-outside, lazy-load ảnh, tooltip, tích hợp thư viện DOM không phải Vue. Chúng giữ logic DOM mệnh lệnh như vậy được đóng gói và khai báo (`v-click-outside`) thay vì rải rác trong các lifecycle hook. Biết các hook và object `binding` (value/arg/modifiers), cộng với dọn dẹp trong `unmounted`, bao quát cách dùng thực tế của chúng — mặc dù với hầu hết logic UI, component vẫn là lựa chọn tốt hơn.