Kako funkcioniše provide/inject u Vue 3?

У Vue 3, provide/inject се користи за пренос података или зависности од родитељског компонента до деце, заобилазећи међуспремне компоненте.

• provide се деклараше у родитељском компоненту и пружа вредности.
• inject се користи у дечијим компонентама за добијање тих вредности.

Ово је згодно за пренос глобалних подешавања, сервиса или података који су потребни дубоко уграђеним компонентама без потребе да се пропси преносе кроз сваки ниво.

Пример:

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

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

На овај начин, дечији компонент има приступ вредности 'dark' која је пружена од стране родитеља.