👩‍💻 Provide Inject

Для передачи данных от родительского компонента к дочернему используются пропсы. Но бывают случаи, когда вложенность элементов достигает большую глубину и в этом очень легко потеряться, особенно когда появляются эмиты и пропсы. Представьте если таких компонентов 5 (у меня уже был опыт с подобным и это было ужасно). Первое, что на ум приходит это использовать store на подобии Pinia, но мой подход в работе заключается в том, что Pinia нужно для связывания данных с различными моделями (отдельными сторами). А что если компонент просто является карточкой товара и она ничему не относится? Зачем использовать отдельную библиотеку, если есть встроенные инструменты для передачи данных?

Родительские компоненты могут служить провайдерами зависимостей для всех своих потомков. Любой компонент в дереве-потомке, независимо от его глубины, может внедрить зависимости, предоставляемые компонентами, расположенными выше в его родительской цепочке.

Чтобы предоставить данные потомкам компонента, используйте функцию [provide()](https://ru.vuejs.org/api/composition-api-dependency-injection.html#provide)

`import { provide } from 'vue'

provide(/* ключ / 'message', / значение */ 'привет!')

Для инъекции данных, предоставляемых компонентом-предком, используйте функцию [inject()](https://ru.vuejs.org/api/composition-api-dependency-injection.html#inject)

`import { inject } from 'vue'

const message = inject('message')

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

Почитать больше про provide inject можно в документации Vue.js``