Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Навіщо потрібен provide/inject?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`provide`/`inject`** - це механізм Vue, який дозволяє **передавати дані глибоко по дереву компонентів**, минаючи проміжні рівні. **Ключове:** він потрібен, коли батьку потрібно передати дані «онукам», «правнукам» тощо без прокидання props через усі проміжні компоненти - це альтернатива «props drilling».Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`provide` **/** `inject` - це механізм Vue, який дозволяє **передавати дані глибоко по дереву компонентів**, минаючи проміжні рівні. Простіше кажучи: > `provide/inject` **потрібен, коли батьку потрібно передати дані «онукам», «правнукам» тощо, без того щоб прокидати props через усі проміжні компоненти.** Це альтернатива «props drilling». --- ## Проблема, яку вирішує provide/inject Без provide/inject: ``` Parent → Child → GrandChild → DeepChild ``` Щоб передати дані з Parent у DeepChild: - потрібно передавати props на кожному рівні -> незручно, багато зайвого коду. З provide/inject: Parent → DeepChild напряму (їм не потрібно бути родичами в шаблоні) --- ## Як працює provide/inject? ### Батько надає значення (provide) ```js import { provide } from 'vue' provide('theme', 'dark') ``` ### Дочірній компонент (будь-якої глибини) приймає (inject) ```js import { inject } from 'vue' const theme = inject('theme') // 'dark' ``` --- ## Приклад використання в Composition API #### Батько ```vue <script setup> import { provide } from 'vue' provide('color', 'blue') </script> ``` #### Глибоко вкладений нащадок ```vue <script setup> import { inject } from 'vue' const color = inject('color') </script> <template> <p :style="{ color }">Текст</p> </template> ``` --- ## Де використовується provide/inject? #### 1. В UI-бібліотеках Vuetify, Element Plus, Naive UI використовують його для: - роботи з темами - конфігурацій за замовчуванням - системних параметрів - контекстів усередині компонентів #### 2. Темізація ```js provide('theme', 'dark') ``` #### 3. Форма + поля форми Parent-Form → Child-Input: ```js provide('form', formContext) ``` #### 4. Глобальні конфіги компонента ```js provide('global-config', config) ``` #### 5. Модальні вікна, портали, тултіпи Передача ID/контексту. #### 6. State management на невеликих проєктах Міні-альтернатива Vuex/Pinia: ```js provide('store', reactive({ count: 0 })) ``` --- ## Важливі особливості provide/inject #### 1. Реактивність працює, але не автоматично Якщо в provide передати `reactive` чи `ref` - усе буде реактивним. Приклад: ```js const state = reactive({ count: 0 }) provide('state', state) ``` В inject: ```js const state = inject('state') state.count++ // реактивно ``` #### 2. inject не може змінювати provide (так само, як props) Це односпрямований потік. #### 3. provide можна перевизначити на будь-якому рівні Кожен компонент може надавати свою версію ключа. #### 4. inject можна задати значення за замовчуванням ```js inject('theme', 'light') ``` --- ## Підсумок (ідеально для співбесіди) > `provide/inject` **- це механізм Vue для передачі даних «вниз по дереву» на будь-яку глибину, без необхідності прокидати props через усі проміжні компоненти.** > **Використовується для конфігурацій, тем, контекстів, форм, глобальних параметрів і побудови UI-бібліотек.** > **Підтримує реактивність, якщо передавати ref/reactive.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.