Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як оголошувати локальні директиви?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Локальні директиви у Vue оголошуються прямо **всередині компонента**, у його опції `directives` (Options API) або через `defineDirective`/об'єкт директив у `<script setup>` (Composition API).
Вони доступні **тільки в цьому компоненті** і не впливають на інші.

Нижче - два способи: Options API і Composition API.

---

## **1. Локальні директиви в Options API**

Оголошуються в полі `directives` компонента:

```js
export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus()
      }
    }
  }
}
```

Використання:

```html
<input v-focus />
```

---

### Доступні хуки директив (Vue 3)

Для локальної директиви доступні хуки:

- **created** - коли директива вперше прив'язана
- **beforeMount**
- **mounted**
- **beforeUpdate**
- **updated**
- **beforeUnmount**
- **unmounted**

Приклад з кількома хуками:

```js
directives: {
  highlight: {
    mounted(el) {
      el.style.background = 'yellow'
    },
    updated(el) {
      el.style.background = 'lightgreen'
    }
  }
}
```

---

## **2. Локальні директиви в Composition API (**`<script setup>`**)**

У `<script setup>` директиви оголошують через **об'єкт**, експортований як `v*`:

#### Приклад

```vue
<script setup>
const vFocus = {
  mounted(el) {
    el.focus()
  }
}
</script>

<template>
  <input v-focus />
</template>
```

Ім'я директиви = ім'я змінної (vFocus -> v-focus).

---

## Приклад складної директиви

```vue
<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>
```

---

## Як передавати аргументи і модифікатори?

```html
<div v-my-dir:arg.modifier="value"></div>
```

У директиві буде:

```js
{
  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).**

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати295 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.