Comunicar componentes profundamente anidados en Vue.js es un reto frecuente cuando trabajas con jerarquías complejas. La combinación de provide e inject dentro de Composition API simplifica esta tarea de forma notable, reduciendo líneas de código y manteniendo la claridad que caracteriza a Vue.js.
¿Qué problema resuelve provide inject en Vue.js?
Cuando un componente necesita enviar datos a un descendiente lejano, la estrategia habitual con props obliga a pasar la información de padre a hijo, de hijo a nieto, y así sucesivamente. Esto genera lo que se conoce como prop drilling: declarar props en componentes intermedios que realmente no las necesitan, solo para que lleguen a su destino [0:38].
Provide inject rompe esa cadena. El componente ancestro provee un valor y cualquier descendiente, sin importar la profundidad, puede inyectarlo directamente. Vue.js ofrece este mecanismo tanto en Options API como en Composition API.
¿Cómo se implementa provide en la función setup?
En Composition API, toda la lógica vive dentro de la función setup. Para usar provide basta con importar la función desde Vue y ejecutarla dentro de setup [1:13].
- Importa
provide desde vue.
- Dentro de
setup, llama a provide con dos argumentos: el nombre (clave) y el valor.
- El valor puede ser una constante, una cadena de texto o incluso una referencia reactiva creada con
ref.
javascript
import { provide } from 'vue';
export default {
setup() {
provide('username', 'DianaNerd');
}
};
Con esto, todos los componentes descendientes de app.vue tienen acceso al dato registrado bajo la clave username [2:16].
¿Cómo se recibe el valor con inject?
En el componente descendiente —por ejemplo home.vue— se importa inject desde Vue y se invoca dentro de setup, pasando como argumento el nombre de la variable que se quiere obtener [2:35].
javascript
import { inject } from 'vue';
export default {
setup() {
const username = inject('username');
return { username };
}
};
inject('username') devuelve el valor que fue provisto por el ancestro.- La variable queda disponible para usarse en funciones computadas, watchers, métodos o directamente en el template.
- Para que el template la reconozca, es necesario incluirla en el return del
setup [3:05].
¿Es reactivo provide inject por defecto?
Un detalle importante: cuando se pasa un valor primitivo con provide, no es reactivo por defecto [3:28]. Si el valor cambia, los componentes que lo inyectaron no se actualizarán automáticamente.
Para lograr reactividad, el valor provisto debe ser una referencia reactiva creada con ref o reactive.
javascript
import { provide, ref } from 'vue';
export default {
setup() {
const counter = ref(0);
provide('counter', counter);
}
};
De esta forma, cualquier cambio en counter se propagará a todos los descendientes que lo inyecten, manteniendo el comportamiento reactivo que Vue.js garantiza.
¿Por qué Composition API genera menos código que Options API?
Al comparar ambas aproximaciones, Composition API produce un código más compacto y legible [3:50]. En Options API, provide e inject forman parte de un objeto JSON de configuración extenso. En Composition API, son simples llamadas a funciones dentro de setup.
- No se requiere un JSON de configuración con múltiples propiedades.
- Las funciones se importan bajo demanda, lo que facilita el tree-shaking.
- La lógica relacionada queda agrupada en un solo lugar, sin dispersarse entre
data, methods, provide y inject.
Esta diferencia se vuelve más evidente a medida que los componentes crecen en complejidad. Composition API escala mejor y permite reutilizar lógica mediante composables, algo que con Options API resultaba difícil de lograr.
Si quieres afianzar estos conceptos, prueba a crear un contador reactivo con ref, proveerlo desde un componente raíz e inyectarlo en un descendiente profundo. Comparte tus resultados en los comentarios y compara cuántas líneas necesitas frente a la versión con Options API.
