props en Svelte?En Svelte, las props son valores que puedes pasar de un componente padre a un componente hijo.
Son una forma simple y directa de compartir datos entre componentes.
Las props en Svelte se definen como variables dentro del componente hijo, y su valor es asignado por el componente padre.
Props:App.svelte (Componente Padre)
<!-- Componente Padre -->
<script>
let message = "Hola desde el componente padre!";
</script>
<ComponenteHijo mensaje={message} />export en el componente hijo?El uso de export permite que la variable definida en el componente hijo pueda ser accesible desde el componente padre.
De esta forma, Svelte entiende que la variable definidad en el componente hijo (export let mensaje;), es una propiedad que se recibirá como una prop desde el componente padre.
<!-- Componente Hijo -->
<script>
export let mensaje;
</script>
<p>{mensaje}</p>En este caso, el componente hijo recibe la prop mensaje desde el componente padre y la muestra en un párrafo.
En Svelte, puedes pasar cualquier tipo de dato como prop, ya sea una variable primitiva (string, number, boolean), un objeto, un array o incluso funciones.
El mecanismo de paso de datos entre componentes es siempre el mismo, sin importar el tipo de dato.
App.svelte (Componente Padre)
<script>
# Importando el componente hijo
import Usuario from "./Usuario.svelte";
let nombre = "Alex"; # Definiendo la variable
</script>
<h1>Bienvenido a la app</h1>
<!-- Usando el componente hijo y pasando la variable nombre como una prop -->
<Usuario nombre={nombre} />Usuario.svelte (Componente Hijo)
<script>
# Recibimos la variable nombre como una prop
export let nombre;
</script>
<!-- Mostrando el nombre del usuario -->
<p>Hola, {nombre}! 👋</p>App.svelte, definimos una variable nombre y la pasamos al componente Usuario.svelte como una propiedad.Usuario.svelte, usamos export let nombre; para recibir el valor pasado desde el componente padre.Este método hace que la comunicación entre componentes sea simple y efectiva. 🚀
App.svelte (Componente Padre)
<script>
import ListaUsuarios from "./ListaUsuarios.svelte";
let usuarios = ["Alex", "María", "Carlos", "Sofía"];
</script>
<h1>Lista de Usuarios</h1>
<ListaUsuarios usuarios={usuarios} />ListaUsuarios.svelte (Componente Hijo)
<script>
export let usuarios;
</script>
<ul>
{#each usuarios as usuario}
<li>{usuario}</li>
{/each}
</ul>App.svelte, definimos un array usuarios con varios nombres y lo pasamos al componente ListaUsuarios.svelte como propiedad.ListaUsuarios.svelte, usamos export let usuarios; para recibir el array.{#each} para iterar sobre el array y mostrar cada nombre dentro de una lista (<ul>).También puedes pasar un objeto completo como una prop y acceder a sus propiedades en el componente hijo.
App.svelte (Componente Padre)<script>
# Importando el componente hijo
import PerfilUsuario from "./PerfilUsuario.svelte";
# Definiendo el objeto usuario con varias propiedades
let usuario = {
nombre: "Brenda",
edad: 21,
ciudad: "Barcelona"
};
</script>
<h1>Información del Usuario</h1>
<!-- Usando el componente hijo y pasando el objeto usuario como una prop -->
<PerfilUsuario usuario={usuario} />PerfilUsuario.svelte (Componente Hijo)<script>
# Recibimos el objeto usuario como una prop
export let usuario;
</script>
<!-- Mostrando la información del usuario -->
<div class="perfil">
<h2>Perfil de Usuario</h2>
<p><strong>Nombre:</strong> {usuario.nombre}</p>
<p><strong>Edad:</strong> {usuario.edad} años</p>
<p><strong>Ciudad:</strong> {usuario.ciudad}</p>
</div>App.svelte, definimos un objeto usuario con varias propiedades y lo pasamos al componente PerfilUsuario.svelte como propiedad.PerfilUsuario.svelte, usamos export let usuario; para recibir el objeto.{usuario.propiedad} para mostrar la información de forma dinámica.En Svelte, puedes pasar funciones del componente padre al hijo como props, permitiendo que el hijo las ejecute cuando sea necesario.
Ejemplo: App.svelte (Componente Padre)
<script>
# Importando el componente hijo
import BotonSaludo from "./BotonSaludo.svelte";
# Definiendo la función
function mostrarSaludo(nombre) {
alert(`Hola, ${nombre}! 👋`);
}
</script>
<h1>Ejemplo de función pasada como prop</h1>
<!-- Usando el componente hijo y pasando la función como una prop -->
<BotonSaludo onSaludo={mostrarSaludo} />BotonSaludo.svelte (Componente Hijo)
<script>
# Recibimos la función onSaludo como una prop
export let onSaludo;
</script>
<!-- Usando la función pasada desde el padre -->
<button on:click={() => onSaludo("Urian")}>Saludar a Urian</button>App.svelte), se crea la función mostrarSaludo que muestra un saludo con el nombre de la persona.mostrarSaludo como una prop al componente hijo (BotonSaludo.svelte), usando la sintaxis {onSaludo}.BotonSaludo.svelte), puedes acceder a la función mostrarSaludo y usarla como si fuera una prop más.Si solo deseas pasar una propiedad específica del objeto, puedes acceder directamente a ella.
Componente Padre:
<script>
let user = {
name: 'Urian Viera',
age: 30
};
</script>
<ComponenteHijo name={user.name} />Componente Hijo:
<script>
export let name;
</script>
<p>Nombre: {name}</p>Puedes pasar objetos que contienen otros objetos dentro de ellos. Solo debes asegurarte de acceder a las propiedades correctamente en el componente hijo.
Componente Padre:
<script>
let user = {
name: 'Luis',
address: {
street: 'Av. Siempre Viva',
city: 'Springfield'
}
};
</script>
<ComponenteHijo user={user} />Componente Hijo:
<script>
export let user;
</script>
<p>Dirección: {user.address.street}, {user.address.city}</p>De esta forma, puedes pasar y trabajar con objetos complejos en Svelte de manera eficiente.
spread propsEsta técnica permite pasar todas las propiedades de un objeto como props individuales al componente hijo.
Ejemplo:
Componente Padre:
<script>
let user = {
name: 'Sofía',
age: 22,
city: 'Bogotá'
};
</script>
<ComponenteHijo {...user} />Componente Hijo:
<script>
export let name;
export let age;
export let city;
</script>
<p>Nombre: {name}, Edad: {age}, Ciudad: {city}</p>{...user}: Esta sintaxis pasa todas las propiedades del objeto user como props individuales al componente hijo.prop normal (name, age, city).Esta forma es útil cuando tienes un objeto con varias propiedades y no quieres escribir cada propiedad manualmente.
Slots para Contenido DinámicoLos slots en Svelte permiten incluir contenido dinámico dentro de un componente, brindando flexibilidad para personalizar la estructura de un componente desde su uso.
Los slots actúan como contenedores que pueden ser rellenados con contenido desde el componente padre.
<!-- Componente Padre -->
<ComponenteHijo>
<p>Este es un contenido dinámico que se pasa al slot.</p>
</ComponenteHijo><!-- Componente Hijo -->
<slot></slot>En este caso, el componente hijo contiene un <slot> que será reemplazado por el contenido dinámico proporcionado por el componente padre.