Доступ к экземпляру родительского компонента

Обработка крайних случаев

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

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

Однако есть случаи, в частности библиотек общих компонентов, когда это может быть подходящим. Например, в абстрактных компонентах, которые взаимодействуют через JavaScript с API вместо отрисовки HTML, как например эти гипотетические компоненты Google Maps:

<google-map>
  <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
</google-map>

Компонент <google-map> может определять свойство map, к которому должны иметь доступ все подкомпоненты. В этом случае <google-map-markers> может получить доступ к карте с помощью this.$parent.getMap, чтобы добавить на карту набор маркеров. Вы можете увидеть этот шаблон в действии здесь.

Однако помните, что компоненты, построенные с использованием этого шаблона являются хрупкими. Например, представьте, что мы добавляем новый компонент <google-map-region> и когда в нём появляется <google-map-markers>, то он должен отображать только маркеры, попадающие в регион:

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

Затем внутри <google-map-markers> вы можете застать себя за созданием хаков наподобие такого:

const map = this.$parent.map || this.$parent.$parent.map

Это может быстро выйти из-под контроля. Поэтому, чтобы предоставлять контекстную информацию для компонентов-потомков на любую глубину вложенности, мы вместо этого рекомендуем инъекцию зависимостей.