Cum funcționează provide/inject în Vue 3?

În Vue 3, provide/inject este utilizat pentru a transmite date sau dependențe de la componenta părinte către componentele copil, evitând componentele intermediare.

• provide este declarat în componenta părinte și oferă valori.
• inject este utilizat în componentele copil pentru a obține aceste valori.

Este util pentru transmiterea configurațiilor globale, serviciilor sau datelor de care au nevoie componentele profund înrudite, fără a fi nevoie să transmiteți props la fiecare nivel.

Exemplu:

// Componenta părinte
export default {
  setup() {
    provide('theme', 'dark')
  }
}

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

Astfel, componenta copil are acces la valoarea 'dark' furnizată de părinte.