Как работи 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', предоставена от родителя.