Введение
В дополнение к набору директив по умолчанию, поставляемому в ядре (например, v-model или v-show), Vue также позволяет вам регистрировать ваши собственные директивы.
Мы представили две формы повторного использования кода во Vue: компоненты и составные элементы. Компоненты являются основными строительными блоками, а составные элементы ориентированы на повторное использование логики с сохранением состояния. С другой стороны, пользовательские директивы в основном предназначены для повторного использования логики, которая включает низкоуровневый доступ к DOM к простым элементам.
Пользовательская директива определяется как объект, содержащий перехватчики жизненного цикла, аналогичные таковым у компонента. Хуки получают элемент, к которому привязана директива. Вот пример директивы, которая фокусирует ввод, когда элемент вставляется в DOM с помощью Vue
Предполагая, что вы не нажимали где-либо на странице, ввод выше должен быть автоматически сфокусирован. Эта директива более полезна, чем autofocus атрибут, поскольку она работает не только при загрузке страницы — она также работает, когда элемент динамически вставляется Vue
В языке script setup CamelCase любая переменная, начинающаяся с v префикса, может использоваться как пользовательская директива. В приведенном выше примере vFocus может использоваться в шаблоне как v-focus
Если не использовать script setup, пользовательские директивы можно зарегистрировать с помощью directives опции
Также принято глобально регистрировать пользовательские директивы на уровне приложения
Обратите внимание
Пользовательские директивы следует использовать только в том случае, если желаемая функциональность может быть достигнута только путем прямого манипулирования DOM. По возможности отдавайте предпочтение декларативным шаблонам с использованием встроенных директив, v-bind поскольку они более эффективны и удобны для рендеринга на сервере
Директивные хуки
Объект определения директивы может предоставлять несколько функций-перехватчиков (все необязательные)
Аргументы-крючки
Директивным перехватчикам передаются следующие аргументы
- el элемент, к которому привязана директива. Это можно использовать для прямого манипулирования DOM.
- vnode: базовый VNode, представляющий привязанный элемент.
- prevNode: VNode, представляющий связанный элемент из предыдущего рендеринга. Доступно только с крючками beforeUpdateи updated
binding объект, содержащий следующие свойства
- value: значение, переданное в директиву. Например, в v-my-directive="1 + 1", значение будет 2
- oldValue: предыдущее значение, доступное только в beforeUpdateи updated. Он доступен независимо от того, изменилось значение или нет
- arg: Аргумент, передаваемый в директиву, если таковой имеется. Например v-my-directive:foo, в arg будет "foo"
- modifiers: объект, содержащий модификаторы, если таковые имеются. Например, в v-my-directive.foo.bar, объект модификаторов будет { foo: true, bar: true }
- instance: Экземпляр компонента, в котором используется директива.
- dir: объект определения директивы.
В качестве примера рассмотрим следующее использование директивы
Аргументом binding будет объект в форме
Подобно встроенным директивам, аргументы пользовательских директив могут быть динамическими. Например
Здесь аргумент директивы будет реактивно обновляться в зависимости от arg свойства в состоянии нашего компонента.
Примечание
Помимо el, вы должны рассматривать эти аргументы как доступные только для чтения и никогда не изменять их. Если вам необходимо обмениваться информацией между перехватчиками, рекомендуется делать это через набор данных элемента .
Сокращение функции
Обычно пользовательская директива имеет одинаковое поведение для mounted и updated без необходимости использования других перехватчиков. В таких случаях мы можем определить директиву как функцию
Литералы объектов
Если вашей директиве требуется несколько значений, вы также можете передать литерал объекта JavaScript. Помните, что директивы могут принимать любое допустимое выражение JavaScript
Использование компонентов
При использовании в компонентах пользовательские директивы всегда будут применяться к корневому узлу компонента, аналогично Fallthrough Attributes
Обратите внимание, что компоненты потенциально могут иметь более одного корневого узла. При применении к многокорневому компоненту директива будет проигнорирована и будет выдано предупреждение. В отличие от атрибутов, директивы нельзя передать другому элементу с помощью v-bind="$attrs". В общем, не рекомендуется использовать собственные директивы для компонентов.