Навіщо потрібен provide/inject?

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

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)

import { provide } from 'vue'

provide('theme', 'dark')

Дочірній компонент (будь-якої глибини) приймає (inject)

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. Темізація

provide('theme', 'dark')

3. Форма + поля форми

Parent-Form → Child-Input:

provide('form', formContext)

4. Глобальні конфіги компонента

provide('global-config', config)

5. Модальні вікна, портали, тултіпи

Передача ID/контексту.

6. State management на невеликих проєктах

Міні-альтернатива Vuex/Pinia:

provide('store', reactive({ count: 0 }))

Важливі особливості provide/inject

1. Реактивність працює, але не автоматично

Якщо в provide передати reactive чи ref - усе буде реактивним.

Приклад:

const state = reactive({ count: 0 })
provide('state', state)

В inject:

const state = inject('state')
state.count++ // реактивно

2. inject не може змінювати provide (так само, як props)

Це односпрямований потік.

3. provide можна перевизначити на будь-якому рівні

Кожен компонент може надавати свою версію ключа.

4. inject можна задати значення за замовчуванням

inject('theme', 'light')

Підсумок (ідеально для співбесіди)

provide/inject - це механізм Vue для передачі даних «вниз по дереву» на будь-яку глибину, без необхідності прокидати props через усі проміжні компоненти. Використовується для конфігурацій, тем, контекстів, форм, глобальних параметрів і побудови UI-бібліотек. Підтримує реактивність, якщо передавати ref/reactive.

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

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

Premium

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