Vue3 прекрасный фреймворк, писать на котором одно удовольствие. Кто не пробовал - попробуйте, а кто юзает - наслаждайтесь. Сегодня хотелось бы написать о такой возможности, как передача данных в дочерние компоненты, с помощью provide-inject механизма. Конечно, всё познаётся в сравнении, поэтому затронем так же props.

И то, и другое - способ передачи данных вниз по дереву компонентов.

Передать данные из родителя в "потомок дочернего компонента" можно несколькими способами:
1. С помощью props.
Во входящий props дочернего компонента помещается объект, который мы хотим передать из родителя.

ParentComponent.vue

<template>
  <child-component :data="someData" v-for="someData in allData" :key="someData.id"/>
</template>

ChildComponent.vue

<script setup lang="ts">
  
  interface DataTypes {...}
  
  const props = defineProps<{
    data: DataTypes
  }>()

</script>
<template>
  <div>{{ props.data }}</div>
</template>

Простой и понятный код - в ходе итерации по массиву данных в компоненте ParentComponent.vue мы создаём однотипные элементы шаблона html (<child-component>) и передаём в каждый шаблон свой элемент для отрисовки. Соответственно в каждом child-component мы этот элемент принимаем как props и отрисовываем в html.

Но что, если у ChildComponent есть свой потомок?

ChildComponent.vue

<script setup lang="ts">
  
  interface DataTypes {...}
  
  const props = defineProps<{
    data: DataTypes
  }>()

</script>
<template>
  <div>{{ props.data }}</div>
  <child-of-child-component :item="props.data">
</template>

В 14 строке я добавил дочерний компонент для нашего ChildComponent.vue и передал ему в качестве props объект, так же полученный пропсом из ParentComponent.vue.
Получилась своеобразная лесенка из данных.

Данная архитектура вполне приемлема и не должна вызвать проблем ни в поддержке, ни в читабельности.

Но... что, если ступеней будет больше? Насколько понятным станет код? А безопасность? Допустим, мы захотим изменить компонент, который в середине лестницы. Тогда все дочерние компоненты могут просто сломаться. Нам придётся учитывать при перепроектировании компонента эти условия, что само по себе уже есть ограничение и нарушение принципа одной ответственности - наш компонент не просто инкапсулирует какую то логику внутри себя, как в коробочке, но еще и передаёт данные в следующий компонент, не являясь исходным "отправителем" этой информации.

Допустим, в конечном компоненте нам нужно каким то образом повлиять на props ? Мы сделаем emit события вверх по цепочке компонента, перехватим это событие в родителе.. и повторим этот способ столько раз, сколько ступеней в нашей лестнице.

Развивать тему emit я не буду, но для полноты картины я посчитал нужным сделать эти пометки.

Итак, проблемы такой архитектуры.

• Нарушение принципа одной ответственности. Я считаю это главным минусом. При перепроектировании или изменении компонента мы вынуждены учитывать дополнительные факторы, могущие повлиять на другие компоненты

• Читабельность, безопасность и очевидность данных. Чтобы отследить источник данных, придётся несколько раз перемещаться по компонентам, параллельно отслеживая возможные emit на изменение этих данных.

Давайте рассмотрим частичную альтернативу этому:

2. С помощью provide-inject

Этот метод позволяет передать данные из родителя в любого по цепочке потомка, минуя промежуточные компоненты.

Передаём данные из родителя:

ParentComponent.vue

<script setup lang="ts">
  provide(key,someData)
</script>

И принимаем в том потомке, где они необходимы, минуя промежуточные:

ChildOfChildComponent.vue

<script setup lang="ts">
  const item = inject(key)
</script>

Не отходя далеко от кассы, поясню некоторые моменты, затем приведу код в приличный вид, дабы продолжить.

key — идентификатор передаваемых данных. В документации рекомендуется использовать для обозначения ключей тип Symbol. И я с этим полностью согласен — этот тип данных генерирует полностью уникальное значение, соответственно проблем со случайным «совпадением» ключей не будет.

От себя добавлю — называйте ключи так, чтобы было сразу понятно откуда приходят данные! Так намного читабельнее и очевиднее!

Давайте же вынесем ключ в файл injectKey.js

 injectKey.js

export const DATA_FROM_ParentComponent_VUE = Symbol()

Соответственно перепишем наш provide-inject:

ParentComponent.vue

<script setup lang="ts">
  provide(DATA_FROM_ParentComponent_VUE, data)
</script>

ChildOfChildComponent.vue

<script setup lang="ts">
  const item = inject(DATA_FROM_ParentComponent_VUE)
</script>

Отлично, теперь данные можно отобразить в шаблоне!

Но, что если мы захотим изменить полученные путём инжектирования данные? Как нам быть? Неужели опять строить лесенку из emit ?

Спешу вас обрадовать - есть гораздо более интересный способ это сделать! Секрет в том, что можно запровайдить реактивную переменную!

Так как данные, полученные путём inject не являются по факту пропсами, мы можем их менять прямо в том компоненте, где мы их получили. Дополню наш код:

ParentComponent.vue

<script setup lang="ts">
  const data: Ref<number> = ref(2)
  provide(DATA_FROM_ParentComponent_VUE, data)
</script>

ChildOfChildComponent.vue

<script setup lang="ts">
  const data: Ref<number>|undefined = inject(DATA_FROM_ParentComponent_VUE)
  function doubleData(){
    if(data){
      data.value *= 2
    }
  }
</script>
<template>
    <div @click="doubleItem">{{ data }}</div>
</template>

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

Но что, если мы хотим ЯВНО в родителе указать функцию, которая должна выполняться с переданными данными? Хорошо, в этом случае можно в родителе объявить дополнительный provide !

ParentComponent.vue

<script setup lang="ts">
  const data: Ref<number> = ref(2)
  provide(DATA_FROM_ParentComponent_VUE, data)
  provide(CHANGE_DATA_FROM_ParentComponent_VUE, () => {
    data.value *= 2
})
</script>

В этом случае, в ЛЮБОМ дочернем компоненте, можно заинжектить функцию:

ChildOfChildComponent.vue / ChildComponent.vue

<script setup lang="ts">
  const double: (() => number)|undefined = inject(CHANGE_DATA_FROM_ParentComponent_VUE)
</script>
<template>
    <div @click="double">...</div>
</template>

Никаких emit, прямое изменение значения переменной прямо в дочернем компоненте

Подытожу: provide-inject является достаточно продуманным и хорошим вариантом обработки и передачи информации по дереву дочерних компонентов, при условии, когда альтернативные варианты невозможны, либо крайне затруднительны. Однако я бы не советовал увлекаться этим механизмом, и заменять им все подрят пропсы или эмиты. Этот механизм хорош в единичных случаях, когда НЕТ АЛЬТЕРНАТИВЫ. Просто представьте файл с ключами длинной в страницу, и вы поймёте о чем я.

Думаю, это всё что я хотел рассказать о provide-inject. Спасибо за внимание.