Как работает provide/inject во Vue 3?

В Vue 3 provide/inject используется для передачи данных или зависимостей от родительского компонента к потомкам, минуя промежуточные компоненты.

• provide объявляется в родительском компоненте и предоставляет значения.
• inject используется в дочерних компонентах для получения этих значений.

Это удобно для передачи глобальных настроек, сервисов или данных, которые нужны глубоко вложенным компонентам без необходимости пробрасывать пропсы через каждый уровень.

Пример:

// Родительский компонент
export default {
  setup() {
    provide('theme', 'dark')
  }
}

// Дочерний компонент
export default {
  setup() {
    const theme = inject('theme')
    return { theme }
  }
}

Таким образом, дочерний компонент получает доступ к значению 'dark', предоставленному родителем.