Tạo directive tùy chỉnh trong Nuxt.js

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.

Triển khai để có thể truyền hàm callback từ component.

3. Giờ đây, hãy sử dụng v-scroll trong trang.

Khác

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

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.