inject() en componentes hijo
inject() con valores predeterminados, inyección obligatoria y claves Symbol para crear namespaces.
inject() en componentes hijo es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
La función inject
inject recupera un valor proporcionado por un ancestro y lo busca mediante la misma clave. Llámela en <script setup>.
import { inject } from "vue";
const theme = inject("theme");La reactividad se conserva
Si el ancestro proporcionó un ref, el valor inyectado es ese mismo ref. Leer theme.value sigue siendo reactivo y se actualiza cuando el proveedor lo modifica.
const theme = inject("theme");
// in template: {{ theme }} (auto-unwrapped)Proporcionar un valor predeterminado
Si ningún ancestro proporcionó la clave, inject devuelve undefined. Pase un segundo argumento como valor predeterminado para que el componente siga funcionando correctamente.
const theme = inject("theme", "light");
// "light" used when nothing was providedValores predeterminados mediante factory
Para valores predeterminados que sean objetos o cuya creación resulte costosa, pase una función factory y establezca el tercer argumento en true, de modo que el valor predeterminado solo se cree cuando sea necesario.
const config = inject("config", () => ({ retries: 3 }), true);Inyectar acciones
Si el proveedor también ofreció una función, inyéctela de la misma forma y llámela para solicitar cambios; el proveedor es quien controla la modificación.
const updateName = inject("updateName");
updateName("Grace");Inyectar un objeto store
Cuando el proveedor ha agrupado el estado y las acciones, inyecte el objeto completo y extraiga mediante destructuring lo que necesite.
const { user, updateName } = inject("userStore");Inyección con seguridad de tipos en TypeScript
Vue exporta InjectionKey<T> para que la inyección tenga seguridad de tipos. Una clave tipada indica a TypeScript exactamente qué forma tiene el valor inyectado.
import type { InjectionKey, Ref } from "vue";
export const themeKey: InjectionKey<Ref<string>> = Symbol("theme");Utilizar la clave tipada
Proporcione e inyecte el valor utilizando la clave tipada. TypeScript inferirá el tipo del valor y señalará las incompatibilidades.
provide(themeKey, theme); // theme: Ref<string>
const theme = inject(themeKey); // inferred Ref<string> | undefinedClaves Symbol para garantizar la unicidad
Utilizar un Symbol como clave, a menudo combinado con InjectionKey, garantiza que no haya colisiones de strings entre proveedores no relacionados en una base de código grande.
export const authKey = Symbol("auth") as InjectionKey<AuthService>;Gestionar proveedores ausentes
En configuraciones estrictas, puede que quiera lanzar una excepción si falta una inyección obligatoria, para detectar pronto los errores de conexión en lugar de utilizar undefined silenciosamente.
const auth = inject(authKey);
if (!auth) throw new Error("auth provider missing");Inyectar en cualquier parte del subárbol
Un componente puede inyectar un valor independientemente de su profundidad, siempre que algún ancestro haya proporcionado la clave. Los componentes intermedios no se modifican; ese es precisamente el objetivo de provide/inject.
Comprobación rápida
¿Qué devuelve inject("theme", "light") cuando no existe ningún proveedor?
Repaso
Ha aprendido que inject(key) lee un valor proporcionado y conserva la reactividad de los refs. Pase un valor predeterminado (o una factory) para disponer de un fallback adecuado y utilice InjectionKey<T> con claves Symbol para lograr una inyección con seguridad de tipos y sin colisiones.
Preguntas frecuentes
¿La lección «inject() en componentes hijo» es gratis?
Sí — el texto completo de «inject() en componentes hijo» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «inject() en componentes hijo»?
inject() con valores predeterminados, inyección obligatoria y claves Symbol para crear namespaces. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «inject() en componentes hijo»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El problema del prop drilling
- provide() en componentes padre
- inject() en componentes hijo
- Provide/Inject para el estado a nivel de aplicación