Kuidas töötab provide/inject Vue 3-s?

Vue 3-s kasutatakse provide/inject-mehhanismi andmete või sõltuvuste edastamiseks vanemkomponendist lastele, mööda vahepealseid komponente.

• provide deklareeritakse vanemkomponendis ja pakub väärtusi.
• inject kasutatakse lastel komponentides nende väärtuste saamiseks.

See on kasulik globaalse seadistuste, teenuste või andmete edastamiseks, mis on vajalikud sügavalt sisestatud komponentidele, ilma et peaks prop-sid iga taseme kaudu edasi andma.

Näide:

// Vanemkomponent
export default {
  setup() {
    provide('theme', 'dark')
  }
}

// Lapskomponent
export default {
  setup() {
    const theme = inject('theme')
    return { theme }
  }
}

Nii saab lapskomponent ligi väärtusele 'dark', mille on pakkunud vanem.