Шаблон $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 (без 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