No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

脷ltima oportunidad para asegurar tu aprendizaje por 1 a帽o a precio especial

Antes: $249

Currency
$189/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

0D
0H
31M
5S
Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Props

7/26
Recursos

Aportes 16

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

馃惇 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=鈥渧alue鈥 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>