¿Cómo crear un componente y gestionar propiedades en Svelte?

La gestión de propiedades en Svelte es esencial para construir aplicaciones robustas y escalables. Este artículo abordará la creación de componentes y la forma de trabajar con propiedades y valores por defecto, así como las propiedades por propagación.

¿Cómo crear un nuevo componente con valores por defecto?

Crear un componente en Svelte empieza por definir un archivo con el nombre del componente. Para mantener las convenciones, se empieza con una letra mayúscula y se usa la extensión .svelte.

1. Crear el componente: Inicia el componente con un script.
2. Definir las propiedades: Usa el método export let para gestionar las propiedades que serán recibidas desde otros componentes.
3. Establecer valores por defecto: Para un valor por defecto, asigna un valor al utilizar export let.

fullscreen
<script>
  export let anotherText = "Lorem ipsum";
</script>

<div class="text">
  <p>{anotherText}</p>
</div>

En este ejemplo, el componente llamado Text recibe una propiedad anotherText, que por defecto es "Lorem ipsum". Esto asegura que si no se recibe un valor desde el componente padre, aún se mostrará un texto.

¿Cómo integrar un componente en la aplicación?

Una vez creado el componente, el siguiente paso es integrarlo en tu aplicación principal.

1. Importar el componente: Utiliza la declaración import para añadirlo a tu aplicación.
2. Usar el componente: Llama al componente y asigna las propiedades que necesites.

fullscreen
<script>
  import Text from './components/Text.svelte';
</script>

<Text anotherText="Hola" />

Aquí, el componente Text es importado y se le pasa la propiedad anotherText con el valor "Hola".

¿Cómo trabajar con objetos y propiedades por propagación?

Svelte permite la transmisión de múltiples propiedades mediante un objeto utilizando la técnica de propagación. Este método puede simplificar el manejo de varias propiedades.

1. Crear un objeto con datos: En tu aplicación principal, define un objeto que contenga todos los datos necesarios.

fullscreen
<script>
  const data = {
    name: "Óscar",
    lastName: "Barajas",
    age: 31
  };
</script>

2. Importar y usar el componente: Trae el componente e integra el objeto usando la propagación.

fullscreen
<script>
  import Person from './components/Person.svelte';
</script>

<Person {...data} />

Al usar las llaves {...} se propagan todos los valores del objeto data al componente Person.

¿Cómo recibir y manejar propiedades en el componente receptor?

Con las propiedades propagadas en el componente receptor, se deben establecer usando export let, y luego representar como sea necesario dentro del componente.

fullscreen
<script>
  export let name;
  export let lastName;
  export let age;
</script>

<div class="person">
  <p>{name} {lastName}, {age}</p>
</div>

Al estructurar correctamente las propiedades en el componente hijo, puedes desglosarlas y usarlas de forma eficiente y clara.

Trabajar con componentes y propiedades en Svelte es una habilidad esencial para cualquier desarrollador que desee crear aplicaciones modernas y eficientes. Sigue explorando y mejorando tus habilidades Svelte para dominar completamente este poderoso framework.