Bài viết hướng dẫn cách sử dụng directive tùy chỉnh trong Nuxt.js để áp dụng các chức năng chung cho trang hoặc component.
Sử dụng directive cuộn làm ví dụ, chúng ta sẽ sử dụng các hàm hook `bind`, `inserted`, `update`, `componentUpdated`, `unbind` để thực hiện các hành động dựa trên sự kiện cuộn và đăng ký nó vào plugin Nuxt để sử dụng toàn cục.
Bài viết sẽ giải thích chi tiết vai trò và thời điểm sử dụng của từng hook để thao tác DOM và quản lý event listener.
Việc tạo các directive tùy chỉnh để xử lý các chức năng DOM được áp dụng chung cho nhiều trang hoặc thành phần là rất thuận tiện.
Điều này giúp đơn giản hóa code và dễ bảo trì hơn.
Tôi muốn tạo một ví dụ về directive scroll.
- Directive này rất hữu ích trong việc tải dữ liệu khi cuộn, hiển thị toast khi cuộn trên màn hình chính hoặc trang chi tiết, v.v...
1. Trước tiên, hãy tạo file và đăng ký nó vào plugin Nuxt.
Nuxt config plugins thực thi các file được định nghĩa khi ứng dụng Nuxt được khởi tạo để kích hoạt các hành động cụ thể. = Có thể sử dụng các chức năng cụ thể trên toàn cục.
2. Triển khai directive scroll.
// plugins/v-scroll.jsimportVuefrom'vue';// Đăng ký directive tùy chỉnhVue.directive('scroll',{inserted(el, binding){const callback = binding.value.callback;// Hàm callback được truyềnconst offset = binding.value.offset||0;// Offset tùy chỉnh (mặc định là 0)// Xử lý sự kiện scrollconstonScroll=()=>{const scrollPosition =window.scrollY+window.innerHeight;const elementPosition = el.offsetTop+ offset;if(scrollPosition >= elementPosition){callback();}};// Đăng ký listener sự kiện scrollwindow.addEventListener('scroll', onScroll);// Xóa listener sự kiện khi element bị unbind el._onScroll= onScroll;},unbind(el){// Xóa listener sự kiện scrollwindow.removeEventListener('scroll', el._onScroll);delete el._onScroll;}});
Triển khai để có thể truyền hàm callback từ component.
Có một vài hook có thể được sử dụng khi tạo directive tùy chỉnh.
1. bind(el, binding, vnode) Mô tả: Chỉ được gọi một lần khi directive được liên kết với phần tử lần đầu tiên.
Có thể thực hiện cấu hình ban đầu cho phần tử được liên kết tại đây.
Đối số
el: Phần tử DOM mà directive được liên kết binding: Đối tượng chứa giá trị, biểu thức, đối số của directive vnode: Node ảo được tạo bởi trình biên dịch Vue
Vue.directive('color',{bind(el, binding){// Thiết lập màu văn bản khi directive được liên kết el.style.color= binding.value;}});
2. inserted(el, binding, vnode)
Mô tả: Được gọi khi phần tử được liên kết được chèn vào DOM. Nói cách khác, nó được sử dụng khi directive được thêm vào DOM thực tế.
* Trong mã liên kết sự kiện scroll, các thao tác liên quan đến DOM được thực hiện tại thời điểm hook inserted.
3. update(el, binding, vnode, oldVnode)
Mô tả: Được gọi mỗi khi thuộc tính hoặc giá trị của phần tử được liên kết thay đổi.
Tuy nhiên, đây vẫn là trạng thái trước khi các component con được cập nhật.
Được sử dụng khi cần thực hiện thao tác DOM khi giá trị liên kết thay đổi.
Đối số
oldVnode: Node ảo được render trước đó
4. componentUpdated(el, binding, vnode, oldVnode)
Mô tả: Được gọi sau khi thuộc tính hoặc giá trị của phần tử được liên kết được cập nhật và cả các component con cũng được cập nhật.
Nói cách khác, nó được thực hiện ở trạng thái DOM cuối cùng. Nó chờ cho đến khi giá trị của component con thay đổi rồi mới thực hiện.
5. unbind(el, binding, vnode)
Mô tả: Được gọi khi directive không còn được áp dụng cho phần tử nữa và phần tử bị phá hủy.
Tại thời điểm này, hãy xóa listener sự kiện hoặc thực hiện các thao tác dọn dẹp.
* Trong ví dụ tùy chỉnh scroll, listener sự kiện được dọn dẹp tại thời điểm unbind.