¿Cómo funciona provide/inject en Vue 3?

En Vue 3, provide/inject se utiliza para transmitir datos o dependencias desde un componente padre a sus hijos, saltándose los componentes intermedios.

• provide se declara en el componente padre y proporciona valores.
• inject se usa en los componentes hijos para obtener estos valores.

Esto es útil para transmitir configuraciones globales, servicios o datos que necesitan componentes profundamente anidados sin tener que pasar props por cada nivel.

Ejemplo:

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

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

De esta manera, el componente hijo accede al valor 'dark' proporcionado por el padre.