provide() en componentes padre
Provisión de valores primitivos, refs reactivas y objetos, manteniendo la reactividad mediante provide.
provide() en componentes padre es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 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 provide
Vue provide permite que un componente ofrezca datos a todos sus descendientes. Llámela en <script setup> con una clave y un valor.
import { provide } from "vue";
provide("message", "Hello from ancestor");Cualquier descendiente puede hacer inject
Una vez proporcionada la clave, cualquier componente situado debajo en el árbol puede hacer inject de esa misma clave, sin importar cuántas capas haya, y sin que los componentes intermedios tengan que hacer nada.
App (provides "message")
-> ... -> DeepChild (injects "message")Proporcionar estado reactivo
Para mantener la reactividad en los descendientes, proporcione un ref (o un objeto reactivo) en lugar de un valor normal. Las actualizaciones del ref se propagan automáticamente a todos los consumidores.
import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);La reactividad fluye hacia abajo
Cuando el ancestro cambia theme.value, todos los descendientes que lo inyectaron vuelven a renderizarse con el nuevo valor. Esta es la principal ventaja frente a pasar una instantánea estática.
function toggle() {
theme.value = theme.value === "dark" ? "light" : "dark";
}Proteger el estado con readonly
De forma predeterminada, un descendiente podría modificar el ref inyectado, lo que dispersa los cambios de estado y rompe el flujo de datos unidireccional. Envuelva el valor en readonly() para que los consumidores puedan leerlo, pero no escribir en él.
import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));Proporcionar funciones como acciones
Para permitir que los descendientes soliciten cambios, proporcione una función junto con el estado de solo lectura. Los consumidores llaman a la función; solo el proveedor modifica la fuente.
function updateName(name) {
user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);Agrupar el estado y las acciones
Un patrón limpio consiste en proporcionar un único objeto con el estado de solo lectura y sus acciones, de forma similar a un pequeño store.
provide("userStore", {
user: readonly(user),
updateName
});provide a nivel de aplicación
También puede proporcionar valores a nivel de aplicación para que estén disponibles para todos los componentes, configurándolos una sola vez en la instancia de la aplicación. (Se explicará en detalle más adelante).
app.provide("appName", "CoddyKit");Claves Symbol para evitar colisiones
Las claves de tipo string pueden entrar en conflicto en aplicaciones grandes. Utilice un Symbol exportado desde un módulo compartido como clave para garantizar su unicidad.
// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);Cuándo utilizar provide
Provide es ideal para el tema, el usuario actual, i18n, el contexto de formularios o la configuración de funcionalidades: valores que necesita un subárbol. Para uno o dos niveles, los props normales siguen siendo más sencillos.
Ámbito del proveedor
Los valores proporcionados están limitados al subárbol del componente proveedor. Dos subárboles hermanos pueden proporcionar valores diferentes con la misma clave sin interferir entre sí.
Comprobación rápida
¿Cómo evita que los descendientes modifiquen el estado proporcionado?
Repaso
Ha aprendido que provide(key, value) expone datos a todos los descendientes. Proporcione un ref para mantener la reactividad, envuélvalo en readonly() para evitar modificaciones, proporcione funciones como acciones y prefiera claves Symbol para evitar colisiones.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «provide() en componentes padre» es gratis?
Sí — el texto completo de «provide() en componentes padre» 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 «provide() en componentes padre»?
Provisión de valores primitivos, refs reactivas y objetos, manteniendo la reactividad mediante provide. 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 2 de 4.
¿Cuánto tiempo toma la lección «provide() en componentes padre»?
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