Як оголошувати локальні директиви?
Локальні директиви у Vue оголошуються прямо всередині компонента, у його опції directives (Options API) або через defineDirective/об'єкт директив у <script setup> (Composition API).
Вони доступні тільки в цьому компоненті і не впливають на інші.
Нижче - два способи: Options API і Composition API.
1. Локальні директиви в Options API
Оголошуються в полі directives компонента:
export default {
directives: {
focus: {
mounted(el) {
el.focus()
}
}
}
}Використання:
<input v-focus />Доступні хуки директив (Vue 3)
Для локальної директиви доступні хуки:
- created - коли директива вперше прив'язана
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeUnmount
- unmounted
Приклад з кількома хуками:
directives: {
highlight: {
mounted(el) {
el.style.background = 'yellow'
},
updated(el) {
el.style.background = 'lightgreen'
}
}
}2. Локальні директиви в Composition API (<script setup>)
У <script setup> директиви оголошують через об'єкт, експортований як v*:
Приклад
<script setup>
const vFocus = {
mounted(el) {
el.focus()
}
}
</script>
<template>
<input v-focus />
</template>Ім'я директиви = ім'я змінної (vFocus -> v-focus).
Приклад складної директиви
<script setup>
const vColor = {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
}
}
</script>
<template>
<p v-color="'red'">Текст</p>
</template>Як передавати аргументи і модифікатори?
<div v-my-dir:arg.modifier="value"></div>У директиві буде:
{
mounted(el, binding) {
console.log(binding.value) // value
console.log(binding.arg) // 'arg'
console.log(binding.modifiers) // { modifier: true }
}
}Підсумок (ідеально для співбесіди)
Локальні директиви оголошуються в об'єкті
directives(Options API) або через змінніvNameу<script setup>. Вони доступні тільки всередині поточного компонента. Директива може містити хуки - mounted, updated, unmounted та ін., і отримувати binding (value, arg, modifiers).
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.