Valores predeterminados de las props
Asigne valores alternativos a las props cuando el padre no los proporcione
Valores predeterminados de las props es una lección gratuita de Sveltejs 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 Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Por qué usar valores predeterminados
Los valores predeterminados permiten usar un componente sin que cada consumidor tenga que pasar todos los props. Definen el comportamiento de reserva.
Valor predeterminado en línea
Asigne un valor al declarar el prop.
export let label = "Click me";Funciones predeterminadas
Los valores predeterminados pueden ser expresiones o literales de función.
export let onClick = () => {};Objetos predeterminados
Use un literal de objeto para valores predeterminados complejos.
export let options = { color: "blue", size: "md" };Cuidado con la referencia compartida
Los valores predeterminados que son literales de objeto se evalúan para cada instancia, por lo que cada componente obtiene su propio objeto. Es seguro modificarlo.
Anular desde el padre
Cuando el componente padre proporciona un valor, este reemplaza el valor predeterminado de esa instancia.
<Button label="Save" />Detección de props obligatorios
Sin un valor predeterminado, el prop es conceptualmente obligatorio. TypeScript puede exigirlo mediante la indicación required.
null y undefined
Pasar undefined como valor hace que se aplique el valor predeterminado; pasar null no lo hace.
Componer valores predeterminados
Componga valores predeterminados a partir de otros props mediante declaraciones reactivas.
export let title = "";
export let subtitle;
$: effectiveSubtitle = subtitle ?? title;Documentación
Documente los valores predeterminados en comentarios JSDoc para que las sugerencias del IDE los muestren.
/** @param {string} label */Valores predeterminados estables
Evite valores predeterminados que cambien entre renderizados. Los valores predeterminados estables reducen los renderizados innecesarios y los comportamientos inesperados.
Comprobación rápida
¿Cómo se establece el valor predeterminado de un prop?
Repaso
Proporcione valores predeterminados mediante una asignación simple. Esto hace que los componentes sean autosuficientes y aclara qué props son opcionales.
Preguntas frecuentes
¿La lección «Valores predeterminados de las props» es gratis?
Sí — el texto completo de «Valores predeterminados de las props» 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 Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Valores predeterminados de las props»?
Asigne valores alternativos a las props cuando el padre no los proporcione Practicas Sveltejs 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 Sveltejs Academy?
No se requiere experiencia previa. Sveltejs 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 «Valores predeterminados de las props»?
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 Sveltejs Academy?
Sí. Cada lección de Sveltejs 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
- Declaración de props con export let
- Transferencia de props desde el padre
- Valores predeterminados de las props
- Transferencia de props con $$props y $$restProps