Comunicar componentes profundamente anidados en Vue.js puede volverse un dolor de cabeza si dependes solo de props. Con provide e inject en Composition API logras enviar datos del componente padre a cualquier descendiente sin pasar por capas intermedias, escribiendo menos código y manteniendo la reactividad cuando la necesitas.

¿Qué resuelve provide e inject en Vue.js?

Cuando tu árbol de componentes crece, pasar información de App.vue hasta un nieto o bisnieto usando props obliga a contaminar componentes intermedios con datos que no les pertenecen. Provide e inject evitan ese recorrido manual.

¿Qué es provide e inject en Vue.js? Es el mecanismo que Vue ofrece para que un componente padre exponga valores y cualquier descendiente los consuma directamente, sin necesidad de pasarlos como props nivel por nivel.

En Composition API la lógica es la misma que en Options API, pero en lugar de declararlos dentro de un objeto de configuración, los usas como funciones dentro de setup.

¿Cómo declarar provide dentro de setup?

Lo primero es importar la función desde Vue y ejecutarla dentro de setup. No necesitas envolverla en otra función, aunque podrías hacerlo si quieres organizar la lógica en métodos internos.

El patrón básico se ve así:

js import { provide } from 'vue'

export default { setup() { provide('username', 'dianamert') } }

La función recibe dos argumentos: el nombre con el que identificas el valor y el valor en sí. Ese valor puede ser una constante, una variable común o una referencia reactiva creada con ref.

• Constante: útil cuando el dato no cambia, como un username fijo.
• Variable reactiva con ref: ideal si quieres que los descendientes reaccionen a los cambios.
• Objeto o función: también es válido, dependiendo de la lógica que necesites compartir.

Guardas el cambio en App.vue y ese valor queda disponible para todo el árbol descendente.

¿Cómo recibir el valor con inject en el componente hijo?

En el componente que va a consumir el dato, importas inject y lo ejecutas dentro de setup pasándole el mismo nombre que usaste en provide.

js import { inject } from 'vue'

export default { setup() { const username = inject('username') return { username } } }

Una vez que la variable existe dentro de setup, puedes usarla en métodos, funciones computed, watchers o exponerla en el return para que el template la renderice. En el ejemplo de la clase, el username aparece debajo del full name en el componente Home.vue después de agregarlo al return.

¿Por qué provide e inject no es reactivo por defecto? Porque al pasar valores planos, Vue no rastrea sus cambios. Para hacerlo reactivo debes envolver el dato con ref o reactive antes de proveerlo.

Esto significa que si pruebas con un counter usando ref, los componentes hijos que lo inyecten verán los cambios automáticamente cada vez que el valor se actualice.

¿Por qué Composition API simplifica este patrón?

Al comparar el mismo ejercicio con su versión en Options API, salta a la vista que Composition API genera código más corto y legible. No tienes un JSON gigante de configuración con secciones separadas para data, methods, provide o inject.

Las ventajas concretas que se notan en este ejercicio:

• Menos líneas de código para lograr exactamente el mismo comportamiento.
• Toda la lógica relacionada vive dentro de setup, lo que mejora la cohesión.
• La reactividad sigue intacta usando ref cuando la necesitas.
• Es más fácil mover lógica a composables reutilizables.

Después de ver lo sencillo que resulta, vale la pena que pruebes este patrón con un counter reactivo: provee un ref desde App.vue, inyéctalo en un descendiente y observa cómo cambia el valor en tiempo real. Comparte tus pruebas en los comentarios y cuéntame qué casos de uso le encontraste a provide e inject en tus propios proyectos.