Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке provide/inject?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**provide/inject** дозволяє передавати дані вниз по дереву компонентів без ланцюга props → props → props: `provide` надає значення, а `inject` отримує його на будь-якому рівні вкладеності. **Ключове:** provide/inject не замінює state manager і корисний передусім для теми, форм, контекстів і бібліотек.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**provide/inject дозволяє "пробрасувати" дані вниз по дереву компонентів без ланцюга props → props → props.** Це зручно, якщо: - вкладеність глибока, - дані потрібні багатьом дочірнім компонентам, - передавати через props незручно. --- ## Просте пояснення #### `provide` - батько **надає** значення #### `inject` - нащадок **отримує** це значення Приблизна аналогія: Батько кладе дані у "спільну коробку" → будь-яка дитина може взяти їх з коробки. --- ## Простий приклад ### Батьківський компонент ```javascript <script setup> import { provide, ref } from 'vue' const theme = ref("light") provide("theme", theme) // ← ділимося станом </script> <template> <Child /> </template> ``` ### Глибоко вкладений компонент ```javascript <script setup> import { inject } from 'vue' const theme = inject("theme") console.log(theme.value) // "light" </script> <template> <p>Тема: {{ theme }}</p> </template> ``` Не важливо, скільки між ними рівнів вкладеності - inject все одно працює. --- ## Коли потрібно використовувати provide/inject? Використовуй provide/inject, якщо: #### Дані потрібні багатьом дочірнім компонентам Наприклад: тема сайту, мова, налаштування, контекст. #### Пропси стають занадто складними Якщо тобі доводиться прокидувати props через 4-5 рівнів - це ознака того, що краще використати provide/inject. #### Компонент - контейнер або layout Наприклад, `<Form>` може provide свої методи і стани дочірнім `<Input>`. #### Це UI-компонентна бібліотека Багато UI-систем (Vuetify, Element Plus) використовують provide/inject для передачі контексту. --- ## Приклад: передаємо об'єкт ```javascript <script setup> import { provide } from 'vue' provide("config", { apiUrl: "/api", version: 1 }) </script> ``` Отримання: ```javascript <script setup> import { inject } from 'vue' const config = inject("config") </script> ``` --- ## provide можна робити реактивним Якщо передаєш `ref()` або `reactive()`, то дитина отримує реактивність автоматично: ```javascript provide("counter", ref(0)) ``` --- ## Що якщо inject не знайдено? Можна вказати значення за замовчуванням: ```javascript const theme = inject("theme", "light") ``` --- ## Коли НЕ варто використовувати provide/inject? - коли дані потрібні лише на 1 рівень вниз → використовуй props - коли тобі потрібен глобальний стан → використовуй Pinia - коли дані мають бути двосторонніми - обережно! provide/inject НЕ замінює state manager. --- ## Підсумок (коротко) **provide/inject - це інструмент Vue для передачі даних від батька до нащадків на будь-якому рівні вкладеності без props.** - `provide(key, value)` - надає дані - `inject(key)` - отримує дані - зручно для темізації, форм, контекстів, бібліотек - працює з реактивними данимиДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.