Props

🐪 camelCase
🧮 PascalCase
🐍 snake_case
🍢 kebab-case

Recomiendo la herramienta Relative path para apoyarse en el llamado de archivos.

Typo min 08:38 dage

Paso de argumentos por propagación: Se envían de forma destructurada los elementos.

{ ...Objeto }

También se puede mandar todo el objeto como un prop

<Person data={data} />

y después en nuestro componente desestructurarlo

export let data;
const {name, lastName, age} = data;

Es el mismo resultado pero para los que quieran seguir la notación del prop=“value” puede ser más útil

En lugar de que realices varias veces

export let name
export let lastName
export let age

Puedes optar por

export let name, lastName, age

Propiedades en Svelte

La podemos realizar mediante dos formas:

1. De forma explícita:

// Componente padre App.svelte
<main>
...
<Text anotherText="Hello!" />
...
</main>

1. De forma implícita:

// Componente padre App.svelte
<main>
...
<Person {...data} />
...html
</main>
// Componente hijo Person.svelte
<script>
  export let name;
  export let gitHub;
  export let rol;
</script>
<div class="p">{name} {gitHub} {rol}</div>

Nota. Considera que la segunda forma deberá estar llamado igualmente en el componente hijo.

Creamos la variable en la estructura de JS

export let anotherText;

Luego la utilizamos en la estructura html

<p>{anotherText}</p>

Luego en el componente que vamos a utilizar podemos enviarle el valor

<Text anotherText="Hola" />

Si por algún motivo no le vamos a enviar valor y queremos que tenga uno por default haremos lo siguiente:

export let anotherText = "Value for default";

Podemos usar la desestructuración de objetos:
Para pasar los props a Person como un solo dato: <Person data={data} />
Luego en el componente:
`<script>
export let data;

const {nombre, apellido, edad}=data;
</script>`

<div class="Person"> <p>{ nombre} { apellido } { edad }</p> </div>

Las props son una forma de comunicar nuestros componentes padres con nuestros hijos, mandandoles datos para que los hijos puedan pintarlo en pantalla o traer datos de una API, pero es importante saber que al pasar una prop a un componente hijo no podremos modificarlos.

Pueden asignar los valores en una sola linea ej.:

./components/Person.svelte

<script>
    export let name, last, age
</script>

<div class="person">
    <ul>
        <li>Name: {name}</li>
        <li>Last: {last}</li>
        <li>Age: {age}</li>
    </ul>
</div>```

Oscar necesita lentes xD

Me encanta lo pausado que habla el profesor, porque le capto todo

👌

Pasando un objeto por propagación.

<script>
  const data = {
    name: 'Cristian',
    lastName: 'Perez',
    age: 30
  };
</script>

Básicamente creando un destructuring igual en React.

 <Person {...data} />

Tienes que ver este codigo antes de empezar a ver el video.

<Person 
	name={data.name} 
	lastname={data.lastname} 
	age={data.age}>
</Person>

https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode
No olviden instalar ese plugin