Що таке provide/inject?

VueJunior~1 хв читання

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) - отримує дані
зручно для темізації, форм, контекстів, бібліотек
працює з реактивними даними

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.