Hoe werkt provide/inject in Vue 3?

In Vue 3 wordt provide/inject gebruikt om gegevens of afhankelijkheden van een oudercomponent naar de kinderen over te dragen, zonder tussenliggende componenten.

• provide wordt gedeclareerd in het oudercomponent en biedt waarden.
• inject wordt gebruikt in de kindcomponenten om deze waarden te verkrijgen.

Dit is handig voor het doorgeven van globale instellingen, services of gegevens die diep geneste componenten nodig hebben zonder props door elke laag te moeten doorgeven.

Voorbeeld:

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

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

Op deze manier krijgt de kindcomponent toegang tot de waarde 'dark' die door de ouder wordt geleverd.