Как регистрировать директивы локально?vue-61

Локальная регистрация директив позволяет определять директивы, доступные только в пределах конкретного компонента, что полезно для создания специализированного поведения без глобального загрязнения.

Основной синтаксис локальной регистрации

Директивы регистрируются в компоненте через опцию directives:

export default {
  directives: {
    focus: {
      // Хуки директивы
      inserted(el) {
        el.focus()
      }
    }
  }
}

Полный пример компонента с локальной директивой

<template>
  <div>
    <input v-focus placeholder="Автофокус при вставке">
    <input v-highlight="'yellow'" placeholder="Подсветка">
  </div>
</template>

<script>
export default {
  directives: {
    // Простая директива фокуса
    focus: {
      inserted(el) {
        el.focus()
      }
    },

    // Более сложная директива с параметрами
    highlight: {
      bind(el, binding) {
        el.style.backgroundColor = binding.value
      },
      update(el, binding) {
        el.style.backgroundColor = binding.value
      }
    }
  }
}
</script>

Особенности локальных директив

1. Доступность: Видны только в текущем компоненте и его дочерних компонентах
2. Именование: Имена указываются без префикса v-
3. Переиспользование: Для использования в других компонентах нужно копировать или выносить в миксины

Регистрация нескольких директив

export default {
  directives: {
    directive1: { /* ... */ },
    directive2: { /* ... */ },
    directive3: { /* ... */ }
  }
}

Использование вычисляемых свойств в директивах

Локальные директивы могут реагировать на изменения данных компонента:

<template>
  <div v-dynamic-style="styleObject"></div>
</template>

<script>
export default {
  data() {
    return {
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }
  },
  directives: {
    dynamicStyle: {
      update(el, binding) {
        Object.keys(binding.value).forEach(prop => {
          el.style[prop] = binding.value[prop]
        })
      }
    }
  }
}
</script>

Локальные директивы в Vue 3

В Vue 3 с Composition API регистрация выглядит аналогично:

import { defineComponent } from 'vue'

export default defineComponent({
  directives: {
    focus: {
      mounted(el) {
        el.focus()
      }
    }
  },
  setup() {
    // Логика компонента
  }
})

Преимущества локальной регистрации

1. Инкапсуляция: Директива не загрязняет глобальное пространство имен
2. Явные зависимости: Понятно, от каких директив зависит компонент
3. Деревья компонентов: Удобно для библиотек компонентов

Когда использовать локальную регистрацию

1. Для специализированных директив, нужных только одному компоненту
2. В компонентных библиотеках для изоляции функциональности
3. Когда нужно избежать конфликтов имен с глобальными директивами

Резюмируем:

локальная регистрация директив в Vue выполняется через опцию directives в компоненте и является лучшим выбором для специализированного поведения, которое не должно быть доступно глобально. Это способствует лучшей инкапсуляции и поддерживаемости кода.