# Custom Directives
breaking
# Gambaran Umum
Fungsi hook pada directives telah berganti nama agar lebih selaras dengan siklus hidup komponen. Berikut merupakan gambaran singkat mengenai apa yang telah berubah:
Additionally, the expression
string is no longer passed as part of the binding
object.
# 2.x Syntax
Lanjutkan membaca untuk penjelasan lebih lanjut.
# Sintaks Vue versi 2.x
Pada Vue versi 2, custom directives dibuat menggunakan hook-hook berikut untuk mengacu pada salah satu bagian dari siklus hidup komponen, dimana semuanya opsional:
- bind - Dipanggil saat directive terikat dengan elemen. Hanya diapnggil sekali.
- inserted - Dipanggil sesudah elemen ditambahkan pada DOM induk.
- update - Hook ini dipanggil ketika elemen diperbarui, namun turunannya belum diperbarui.
- componentUpdated - Hook ini dipanggil sesudah komponen dan turunannya selesai diperbarui.
- unbind - Hook ini dipanggil sesudah directive dihapus. Hanya dipanggil sekali.
Berikut merupakan contoh dari directives:
<p v-highlight="'yellow'">Sorot elemen ini supaya berlatar kuning cerah</p>
Vue.directive('highlight', {
bind(el, binding, vnode) {
el.style.background = binding.value
}
})
2
3
4
5
Pada penyetelan awal untuk komponen di atas, directive mengikat sebuah style dengan meneruskan sebuah nilai yang dapat diperbarui menjadi nilai lain pada aplikasi.
# Sintaks Vue versi 3.x
Namun pada Vue versi 3, kami telah membuat API yang lebih kohesif untuk custom directives. Seperti yang dapat Anda lihat, API pada versi sebelumnya berbeda jauh dengan siklus hidup komponen Vue walaupun sama-sama dihubungkan pada kejadian yang sejenis. Sekarang kami telah menyatukan kedua hal tersebut menjadi:
- created - new! This is called before the element's attributes or event listeners are applied.
- bind → beforeMount
- inserted → mounted
- beforeUpdate: Baru! Hook ini akan dipanggil sebelum elemen diperbarui, mirip dengan hook pada siklus hidup komponen.
- update → Dihapus! Ada terlalu banyak persamaan dengan
updated
, sehingga hook ini berlebihan. Mohon gunakanupdated
. - componentUpdated → updated
- beforeUnmount: Baru! Mirip dengan hook pada siklus hidup komponen, hook ini akan dipanggil sebelum elemen dilepaskan dari DOM.
- unbind -> unmounted
API akhir akan menjadi seperti berikut:
const MyDirective = {
created(el, binding, vnode, prevVnode) {}, // new
beforeMount() {},
mounted() {},
beforeUpdate() {}, // baru
updated() {},
beforeUnmount() {}, // baru
unmounted() {}
}
2
3
4
5
6
7
8
9
API yang dihasilkan dapat digunakan seperti berikut, mengikuti contoh sebelumnya:
<p v-highlight="'yellow'">Sorot elemen ini supaya berlatar kuning cerah</p>
const app = Vue.createApp({})
app.directive('highlight', {
beforeMount(el, binding, vnode) {
el.style.background = binding.value
}
})
2
3
4
5
6
7
Sekarang hook siklus hidup pada custom directive telah mengikuti hook siklus hidup pada komponen, sehingga hook tersebut dapat lebih mudah diingat dan dibuat!
# Kasus Tepi: Mengakses Komponen
Umumnya, Anda dianjurkan untuk memisahkan directive dengan komponen tempat directive tersebut digunakan. Mengakses komponen melalui sebuah custom directive menunjukkan sebuah tanda bahwa directive tersebut seharusnya merupakan sebuah komponen. Namun, ada beberapa kasus dimana hal tersebut menjadi masuk akal.
Pada Vue versi 2, komponen harus diakses melalui argumen vnode
:
bind(el, binding, vnode) {
const vm = vnode.context
}
2
3
Pada Vue versi 3, komponen tersebut merupakan bagian dari argumen binding
:
mounted(el, binding, vnode) {
const vm = binding.instance
}
2
3
WARNING
Dengan dukungan fragments, komponen dapat memiliki lebih dari satu node utama. Ketika digunakan pada komponen yang memiliki lebih dari satu node inti, sebuah directive akan dihiraukan dan sebuah peringatan akan dicatat.