PassFront
  1. PassFront
  2. База знаний
  3. Продвинутые темы

Зачем нужен provide-inject?

Продвинутые темы

`provide`/`inject` (Vue) нужны для передачи данных от предка к потомкам на любой глубине без prop drilling — аналог Context API в React.

Что делает

Компонент-предок предоставляет (provide) данные, а любой потомок внедряет (inject) их, минуя промежуточные компоненты:

// Предок
import { provide } from 'vue';
provide('theme', 'dark');

// Любой потомок (на любой глубине)
import { inject } from 'vue';
const theme = inject('theme'); // 'dark'

Зачем нужен

  • Избежать prop drilling — не прокидывать props через каждый уровень.
  • Сквозные данные — тема, локаль, авторизованный пользователь, конфигурация.
  • Плагины/библиотеки — предоставлять общий контекст (i18n, store).

Реактивность

Чтобы потомки реагировали на изменения, предоставляют реактивное значение (ref/reactive):

const theme = ref('dark');
provide('theme', theme); // потомки увидят изменения

Значение по умолчанию

const theme = inject('theme', 'light'); // 'light', если не предоставлено

provide/inject против props

  • props — явная передача родитель → ребёнок (один уровень), видно в интерфейсе компонента.
  • provide/inject — неявная передача на любую глубину, для сквозных данных.

Аналог в React

Context API (createContext → Provider → useContext).

Коротко для собеседования

provide/inject (Vue) передают данные от предка потомкам на любой глубине без prop drilling: предок provide('key', value), потомок inject('key'). Для сквозных данных (тема, локаль, юзер, плагины). Реактивность — через ref/reactive. Аналог Context API в React.

Другие вопросы раздела