Kaip veikia provide/inject Vue 3?

Vue 3, provide/inject naudojamas duomenims arba priklausomybėms perduoti iš tėvų komponento į vaikus, apeinant tarpininius komponentus.

• provide deklaruojamas tėvų komponento ir teikia reikšmes.
• inject naudojamas vaikų komponentuose norint gauti šias reikšmes.

Tai naudinga perduodant globalius nustatymus, paslaugas ar duomenis, kurių reikia giliau įdėtose komponentuose, be būtinybės perduoti props per kiekvieną lygį.

Pavyzdys:

// Tėvų komponentas
export default {
  setup() {
    provide('theme', 'dark')
  }
}

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

Taip, vaiko komponentas gauna prieigą prie reikšmės 'dark', kuri pateikta iš tėvo.