Declaración de props con export let
Exponga propiedades del componente a los componentes padre mediante la palabra clave export
Declaración de props con export let es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 1 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.
Los props son exports
Para declarar un prop, escriba export let name en el script del componente. La palabra clave export lo expone a los componentes padre.
<script>
export let name;
</script>
<p>Hello {name}!</p>Varios props
Enumere tantos props como necesite su componente.
<script>
export let title;
export let count;
export let onClick;
</script>Props con tipos
Añada tipos con TypeScript para obtener seguridad y compatibilidad con el editor.
<script lang="ts">
export let count: number;
export let label: string;
</script>Por qué exportar
La palabra clave export en el contexto de script se toma prestada de los módulos ES, pero en Svelte significa «exponer al componente padre».
Obligatorios frente a opcionales
Los props sin un valor predeterminado son obligatorios. Proporcione un valor predeterminado para hacerlos opcionales.
export let title = "Untitled";Convención de solo lectura
Trate los props como entradas de solo lectura. Modificarlos está permitido técnicamente, pero rompe el flujo de datos unidireccional.
Props reactivos
Los props son reactivos: cuando el componente padre pasa un valor nuevo, el componente se vuelve a renderizar automáticamente.
Funciones predeterminadas
Los valores predeterminados pueden ser funciones o expresiones calculadas.
export let onClick = () => {};Props booleanos
En los props booleanos, proporcionar el atributo sin un valor equivale a true.
<MyComp disabled />Props con alias
Si el nombre del prop es una palabra reservada como class, puede cambiarle el nombre internamente.
let className;
export { className as class };Alias renombrados
El patrón de alias permite aceptar nombres compatibles con HTML y conservar identificadores válidos para JS internamente.
Comprobación rápida
¿Cómo se declara un prop?
Repaso
Los props se declaran con export let, pueden tener tipos y valores predeterminados, y son reactivos cuando el componente padre los actualiza.
Preguntas frecuentes
¿La lección «Declaración de props con export let» es gratis?
Sí — el texto completo de «Declaración de props con export let» 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 «Declaración de props con export let»?
Exponga propiedades del componente a los componentes padre mediante la palabra clave export 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 1 de 4.
¿Cuánto tiempo toma la lección «Declaración de props con export let»?
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