Объект, содержащий атрибуты провала компонента.

Тип

Атрибуты Fallthrough — это атрибуты и обработчики событий, передаваемые родительским компонентом, но не объявленные дочерним компонентом как свойство или создаваемое событие

По умолчанию все $attrs будет автоматически унаследовано от корневого элемента компонента, если существует только один корневой элемент. Это поведение отключено, если компонент имеет несколько корневых узлов, и его можно явно отключить с помощью этой inheritAttrs опции.

По умолчанию привязки атрибутов родительской области, которые не распознаются как реквизиты, «проваливаются». Это означает, что когда у нас есть однокорневой компонент, эти привязки будут применяться к корневому элементу дочернего компонента как обычные атрибуты HTML. При разработке компонента, который обертывает целевой элемент или другой компонент, такое поведение не всегда может быть желаемым. Установив inheritAttrs значение false, это поведение по умолчанию можно отключить. Атрибуты доступны через $attrs свойство экземпляра и могут быть явно привязаны к некорневому элементу с помощью v-bind

При объявлении этой опции в компоненте, использующем script setup, вы можете использовать defineOptions макрос

«Атрибут падения» — это атрибут или v-on прослушиватель событий, который передается компоненту, но не объявлен явно в реквизитах принимающего компонента или в эмиттах . Типичными примерами этого являются class, style и id атрибуты

Когда компонент отображает один корневой элемент, атрибуты перехода автоматически добавляются к атрибутам корневого элемента. Например, дан MyButton компонент со следующим шаблоном

И родитель, использующий этот компонент с

Окончательный визуализированный DOM будет таким

Здесь MyButton не заявлено class как принятая опора. Таким образом, class он рассматривается как резервный атрибут и автоматически добавляется к MyButton корневому элементу

Если корневой элемент дочернего компонента уже имеет существующие атрибуты class или style, он будет объединен со значениями classи style, унаследованными от родительского компонента. Предположим, мы изменили шаблон из MyButtonпредыдущего примера на

Тогда окончательный отрендеренный DOM теперь будет выглядеть так

То же правило применимо и к v-on прослушивателям событий

Прослушиватель click будет добавлен к корневому элементу MyButton, т. е. к собственному buttonэлементу. При нажатии нативного компонента buttonзапускается onClick метод родительского компонента. Если у нативного метода buttonуже есть click прослушиватель, связанный с v-on, то сработают оба прослушивателя

Например, если компонент отображает другой компонент как свой корневой узел, мы провели рефакторинг, MyButton чтобы отобразить a BaseButton как его корневой узел

Тогда атрибуты Fallthrough, полученные , MyButton будут автоматически перенаправлены в BaseButton

Если вы не хотите, чтобы компонент автоматически наследовал атрибуты, вы можете установить это inheritAttrs: false в параметрах компонента.

Начиная с версии 3.3 вы также можете использовать defineOptions непосредственно script setup

Распространенный сценарий отключения наследования атрибутов — это когда атрибуты необходимо применить к другим элементам, помимо корневого узла. Установив для этого inheritAttrs параметра значение false, вы можете получить полный контроль над тем, где следует применять атрибуты перехода.

Доступ к этим резервным атрибутам можно получить непосредственно в выражениях шаблона следующим образом $attrs

Объект $attrs включает в себя все атрибуты, которые не объявлены компонентами props или emits опциями (например, class, style, v-on прослушиватели и т. д.)

Используя наш MyButtonпример компонента из предыдущего раздела — иногда нам может потребоваться обернуть фактический buttonэлемент дополнительным элементом divдля целей стилизации

Мы хотим, чтобы все атрибуты падения, такие как class и v-on слушатели , применялись к внутреннему button, а не к внешнему div. Мы можем добиться этого с помощью inheritAttrs: false и v-bind="$attrs"

Помните, что v-bind без аргумента все свойства объекта привязываются как атрибуты целевого элемента

В отличие от компонентов с одним корневым узлом, компоненты с несколькими корневыми узлами не имеют автоматического поведения при провале атрибутов. Если $attrs они не связаны явно, будет выдано предупреждение во время выполнения

Если CustomLayoutу вас есть следующий многокорневой шаблон, появится предупреждение, поскольку Vue не может быть уверен, где применить атрибуты Fallthrough

Предупреждение будет подавлено, если $attrs оно явно привязано

При необходимости вы можете получить доступ к атрибутам провала компонента с script setupпомощью useAttrs() API

Если не использовать script setup, attrs будет представлено как свойство контекста setup()

Обратите внимание: хотя attrs объект здесь всегда отражает последние атрибуты падения, он не является реактивным (по соображениям производительности). Вы не можете использовать наблюдателей для наблюдения за его изменениями. Если вам нужна реактивность, используйте prop. Альтернативно вы можете использовать onUpdated() для выполнения побочных эффектов последние attrsобновления каждого обновления.