Membuat Custom Directive di Nuxt.js

Fungsi-fungsi yang diterapkan secara umum ke DOM di berbagai halaman atau komponen

akan lebih mudah jika dibuat sebagai directive kustom.

Saya ingin membuat contoh directive scroll.

- Berguna untuk memuat data saat menggulir, menampilkan toast saat menggulir di layar utama atau halaman detail, dll.

1. Pertama, buat file dan daftarkan di plugin nuxt.

Plugin konfigurasi nuxt menjalankan file yang telah ditentukan saat aplikasi Nuxt diinisialisasi untuk mengaktifkan perilaku tertentu. = Fungsi tertentu dapat digunakan secara global.

2. Implementasikan directive scroll.

Fungsi callback dapat diteruskan dari komponen.

3. Sekarang gunakan v-scroll di halaman.

Lainnya

Ada beberapa hook yang dapat digunakan saat membuat directive kustom.

1. bind(el, binding, vnode)
Penjelasan: Dipanggil hanya sekali ketika directive pertama kali di-bind ke elemen.

Pengaturan awal dapat dilakukan pada elemen yang di-bind di sini.

Argumen

el: Elemen DOM tempat directive di-bind
binding: Objek yang berisi nilai, ekspresi, dan argumen directive
vnode: Node virtual yang dibuat oleh kompiler Vue

2. inserted(el, binding, vnode)

Penjelasan: Dipanggil ketika elemen yang di-bind disisipkan ke dalam DOM. Dengan kata lain, digunakan ketika directive benar-benar ditambahkan ke DOM.

* Pada kode pengikatan peristiwa gulir, operasi terkait DOM dilakukan pada saat hook inserted.

3. update(el, binding, vnode, oldVnode)

Penjelasan: Dipanggil setiap kali atribut atau nilai elemen yang di-bind berubah.

Namun, ini masih dalam keadaan sebelum komponen anak diperbarui.

Digunakan ketika operasi DOM diperlukan saat nilai pengikatan berubah.

Argumen

oldVnode: Node virtual yang dirender sebelumnya

4. componentUpdated(el, binding, vnode, oldVnode)

Penjelasan: Dipanggil setelah atribut atau nilai elemen yang di-bind diperbarui dan semua komponen anak diperbarui.

Dengan kata lain, dieksekusi pada status DOM akhir. Tunggu hingga nilai komponen anak berubah sebelum dieksekusi.

5. unbind(el, binding, vnode)

Penjelasan: Dipanggil ketika directive tidak lagi diterapkan pada elemen dan elemen tersebut dihancurkan.

Pada titik ini, pendengar acara dihapus, atau pekerjaan pembersihan dilakukan.

* Pada contoh kustom scroll, pendengar acara dibersihkan pada saat unbind.