Comunicación entre Componentes

¿Qué son y cómo funcionan las 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.

Ejemplo de Props:

App.svelte (Componente Padre)

js 
<!-- Componente Padre -->
<script>
let message = "Hola desde el componente padre!";
</script>

<ComponenteHijo mensaje={message} />

¿Por qué se usa 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.

  Importante

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.

js 
<!-- 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.

Cómo Pasar Variables, Arrays, Objetos y Funciones entre Componentes en Svelte

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.

1Pasar Variables entre Componentes en Svelte

Ejemplo: Mostrar el Nombre de un Usuario

App.svelte (Componente Padre)

js 
<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)

js 
<script>
# Recibimos la variable nombre como una prop
export let nombre;
</script>

<!-- Mostrando el nombre del usuario -->
<p>Hola, {nombre}! 👋</p>
  Explicación

  1. En App.svelte, definimos una variable nombre y la pasamos al componente Usuario.svelte como una propiedad.
  2. En Usuario.svelte, usamos export let nombre; para recibir el valor pasado desde el componente padre.
  3. Se muestra el nombre del usuario dentro del componente hijo de forma dinámica.

Este método hace que la comunicación entre componentes sea simple y efectiva. 🚀

2Pasar un Array de Nombres entre Componentes en Svelte

App.svelte (Componente Padre)

js 
<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)

js 
<script>
export let usuarios;
</script>

<ul>
{#each usuarios as usuario}
  <li>{usuario}</li>
{/each}
</ul>
  Explicación

  1. En App.svelte, definimos un array usuarios con varios nombres y lo pasamos al componente ListaUsuarios.svelte como propiedad.
  2. En ListaUsuarios.svelte, usamos export let usuarios; para recibir el array.
  3. Usamos {#each} para iterar sobre el array y mostrar cada nombre dentro de una lista (<ul>).

3 Pasar un Objeto Entre Componentes

También puedes pasar un objeto completo como una prop y acceder a sus propiedades en el componente hijo.

App.svelte (Componente Padre)
js 
<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)
js 
<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>
  Explicación

  1. En App.svelte, definimos un objeto usuario con varias propiedades y lo pasamos al componente PerfilUsuario.svelte como propiedad.
  2. En PerfilUsuario.svelte, usamos export let usuario; para recibir el objeto.
  3. Accedemos a sus propiedades dentro del HTML usando {usuario.propiedad} para mostrar la información de forma dinámica.

📌 Pasar Funciones del Componente Padre al Hijo

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)

js 
<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)

js 
<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>
  Explicación

  • En el componente padre (App.svelte), se crea la función mostrarSaludo que muestra un saludo con el nombre de la persona.
  • Luego pasas la función mostrarSaludo como una prop al componente hijo (BotonSaludo.svelte), usando la sintaxis {onSaludo}.
  • Por ultimo, en el componente hijo (BotonSaludo.svelte), puedes acceder a la función mostrarSaludo y usarla como si fuera una prop más.
  • En este caso, al hacer clic en el botón, se ejecuta la función pasada desde el padre y muestra un mensaje de alerta.

Pasando propiedades individuales del objeto

Si solo deseas pasar una propiedad específica del objeto, puedes acceder directamente a ella.

Componente Padre:

js 
<script>
let user = {
  name: 'Urian Viera',
  age: 30
};
</script>

<ComponenteHijo name={user.name} />

Componente Hijo:

js 
<script>
export let name;
</script>

<p>Nombre: {name}</p>

Pasando un objeto anidado

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:

js 
<script>
let user = {
  name: 'Luis',
  address: {
    street: 'Av. Siempre Viva',
    city: 'Springfield'
  }
};
</script>

<ComponenteHijo user={user} />

Componente Hijo:

js 
<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.

Pasando propiedades con spread props

Esta técnica permite pasar todas las propiedades de un objeto como props individuales al componente hijo.

Ejemplo:

Componente Padre:

js 
<script>
let user = {
  name: 'Sofía',
  age: 22,
  city: 'Bogotá'
};
</script>

<ComponenteHijo {...user} />

Componente Hijo:

js 
<script>
export let name;
export let age;
export let city;
</script>

<p>Nombre: {name}, Edad: {age}, Ciudad: {city}</p>
  Explicación

  • {...user}: Esta sintaxis pasa todas las propiedades del objeto user como props individuales al componente hijo.
  • En el componente hijo, puedes acceder a cada propiedad como si fuera una prop normal (name, age, city).

Esta forma es útil cuando tienes un objeto con varias propiedades y no quieres escribir cada propiedad manualmente.

Uso de Slots para Contenido Dinámico

Los 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.

Ejemplo de Slots:

js 
<!-- Componente Padre -->
<ComponenteHijo>
<p>Este es un contenido dinámico que se pasa al slot.</p>
</ComponenteHijo>
js 
<!-- 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.

  Resumen

  • Props: Son valores pasados desde el componente padre al componente hijo, permitiendo la comunicación entre ellos.
  • Pasar Variables y Objetos: En Svelte, puedes pasar cualquier tipo de dato entre componentes a través de props, como variables primitivas, objetos o incluso funciones.
  • Slots: Son un mecanismo de Svelte para permitir contenido dinámico dentro de un componente, brindando flexibilidad para personalizar el contenido del componente hijo desde el componente padre.