Hogyan működik a provide/inject a Vue 3-ban?

Vue 3-ban a provide/inject a szülő komponensből az utódoknak történő adatok vagy függőségek átadására szolgál, megkerülve a közbenső komponenseket.

• A provide a szülő komponensben van deklarálva, és értékeket biztosít.
• Az inject az utód komponensekben használható ezeknek az értékeknek a megszerzésére.

Ez hasznos a globális beállítások, szolgáltatások vagy mélyen beágyazott adatok átadására anélkül, hogy propsokat kellene átadni minden szinten.

Példa:

// Szülő komponens
export default {
  setup() {
    provide('theme', 'dark')
  }
}

// Utód komponens
export default {
  setup() {
    const theme = inject('theme')
    return { theme }
  }
}

Így az utód komponens hozzáfér a szülő által biztosított 'dark' értékhez.