Comment fonctionne provide/inject dans Vue 3?

Dans Vue 3, provide/inject est utilisé pour transmettre des données ou des dépendances du composant parent aux enfants, en évitant les composants intermédiaires.

• provide est déclaré dans le composant parent et fournit des valeurs.
• inject est utilisé dans les composants enfants pour obtenir ces valeurs.

C'est pratique pour transmettre des configurations globales, des services ou des données nécessaires à des composants profondément imbriqués sans avoir à passer des props à chaque niveau.

Exemple:

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

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

Ainsi, le composant enfant accède à la valeur 'dark' fournie par le parent.