Kā darbojas provide/inject Vue 3?

Vue 3, provide/inject tiek izmantots datu vai atkarību nodošanai no vecā komponenta uz bērniem, apietot starpkomponentes.

• provide tiek deklarēts vecā komponentā un nodrošina vērtības.
• inject tiek izmantots bērnu komponentēs, lai iegūtu šīs vērtības.

Tas ir noderīgi, lai nodotu globālas iestatījumus, pakalpojumus vai datus, kas nepieciešami dziļi ieliktām komponentēm, bez nepieciešamības pārsūtīt props katrā līmenī.

Piemērs:

// Vecāku komponent
export default {
  setup() {
    provide('theme', 'dark')
  }
}

// Bērnu komponent
export default {
  setup() {
    const theme = inject('theme')
    return { theme }
  }
}

Tādējādi bērnu komponentē ir piekļuve vērtībai 'dark', ko nodrošinājis vecāks.