Шаблон $attrs

В Части 3 мы реализовали механизм широковещания, чтобы упростить взаимодействие между компонентами в иерархии глубоких уровней. В этой и следующей части давайте рассмотрим еще один набор сверхмощных паттернов.

Шаблон $attrs

Как и в предыдущих примерах, у нас есть четыре вложенных компонента, образующих дерево:

Допустим, у App есть список десертов, и все, что ему сейчас нужно сделать, это передать три реквизита Parent:

Теперь сценарий такой:

Parent не хочет использовать эти три реквизита, переданные от App, компонент, который должен их использовать, на самом деле GrandchildA. Таким образом, чтобы передать свойства из App --> Parent --> ChildA --> GrandchildA, вы можете определить три свойства в Parent и ChildA соответственно и передавать их вниз уровень за уровнем, пока не достигнет GrandchildA. Но у Vue.js для этого есть классный дизайн: $attrs. Добавим две строчки кода в Parent:

Parent не объявляет никаких реквизитов, и мы видим, что $attrs — это объект, содержащий три attributes, которые App связывает с Parent.

Определение $attrs и $props

Чтобы быть более точным:

  • $attrs — это объект в экземпляре VueComponent, который собирает все необъявленные атрибуты, связанные с этим компонентом.
  • В объекте $attrs имя ключа — это имя атрибута, а их значение — значение атрибута.

Еще одно замечание: соответственно,

  • $props — это объект экземпляра VueComponent, который собирает все объявленные свойства, связанные с этим компонентом.

Если мы проверим DOM Parent:

Три атрибута добавляются к корню div#parent. Если мы не хотим, чтобы они добавлялись в DOM, мы можем установить для этой опции inheritAttrs значение false:

Теперь DOM ясен, и Parent действительно хочет передать свой объект $attrs ChildA, мы можем добиться этого с помощью директивы v-bind:

Привязываем Parent.$attrs к тегу ChildA, а в ChildA выводим его $attrs:

ChildA.$attrs и Parent.$attrs ссылаются на один и тот же объект. Данные проходят.

В GrandchildA он может использовать свой $attrs для заполнения шаблона:

Здесь,

ChildA.$attrs = Parent.$attrs = GrandchildA.$attrs

Теперь в представлении GrandchildA мы можем видеть данные:

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

Заключение

Шаблон $attrs — один из самых мощных шаблонов для передачи данных в иерархии компонентов глубокого уровня, и он особенно полезен для создания библиотеки компонентов пользовательского интерфейса. Вы помните синтаксис {...props} для тега компонента в React? Аналогичная цель.

Чтобы узнать больше об использовании шаблона $attrs, также ознакомьтесь с этой статьей:

Создайте собственную библиотеку пользовательского интерфейса Vue.js на основе Vuetify и опубликуйте ее в NPM

Вот все статьи из этой серии:

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 1

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 2

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 3

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 4

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 5

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 6

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 7