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:

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. De esta forma, Svelte entiende que la variable 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 ejemplo, el componente hijo recibe la prop mensaje desde el componente padre y la muestra en un párrafo.

Pasar variables, objetos, etc., entre componentes en Svelte

En Svelte, puedes pasar cualquier tipo de dato como prop, ya sea una variable primitiva (como un string o número), un objeto, o incluso funciones. El paso de datos entre componentes se hace de la misma manera sin importar el tipo de dato.

Pasando un objeto directamente entre Componentes:

Puedes pasar un objeto completo como una prop, y luego acceder a sus propiedades en el componente hijo.

js 
<!-- Componente Padre -->
<script>
let user = {
  name: "Brenda",
  age: 21
};
</script>

<ComponenteHijo user={user} />
js 
<!-- Componente Hijo -->
<script>
export let user;
</script>

<p>Nombre: {user.name}</p>
<p>Edad: {user.age}</p>

En este ejemplo, un objeto user es pasado desde el componente padre al hijo, y luego el hijo accede a las propiedades del objeto para mostrarlas.

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.

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:

Componente Padre:

js 
<script>
// Definimos una función en el componente padre
function saludo(nombre) {
  alert(`Hola, ${nombre}!`);
}
</script>

<ComponenteHijo {saludo} />

Componente Hijo:

js 
<script>
// Recibimos la función como prop
export let saludo;
</script>

<button on:click={() => saludo('Juan')}>Saludar</button>
  Explicación

  • En el componente padre, creas una función llamada saludo.
  • Luego pasas esta función al componente hijo como una prop, usando la sintaxis {saludo}.
  • En el componente hijo, puedes acceder a la función saludo 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.

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 ejemplo, 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.