🐪 camelCase
🧮 PascalCase
🐍 snake_case
🍢 kebab-case
Recomiendo la herramienta Relative path para apoyarse en el llamado de archivos.
Introducción
Para qué sirve Svelte y qué aprenderas sobre él
¿Qué es Svelte?
Elementos básicos de Svelte
Primeros pasos
Estilos
Componentes
Reactividad
Props
Condicionales
Estructura de control: each
Eventos del DOM y Binding
Ciclo de vida
Stores
Configuración del proyecto
Presentación de Pugstagram
Configurar el entorno de trabajo
Servidor de desarrollo local
Desarrollo de la aplicación
Estructura
Componentes Header y Sidebar
Componente Timeline
Estilos de nuestra aplicación
Conectar nuestra aplicación a una API
Componente Comments
Componente Modal
Header Likes
Deployment
Despliegue en Netlify
Continúa con el Curso de Sapper
Apuntes de Svelte
You don't have access to this class
Keep learning! Join and start boosting your career
Property management in Svelte is essential for building robust and scalable applications. This article will discuss the creation of components and how to work with properties and defaults, as well as properties per propagation.
Creating a component in Svelte starts by defining a file with the name of the component. To maintain conventions, it starts with a capital letter and uses the extension .svelte
.
export let
method to manage the properties that will be received from other components.export let
.<script> export let anotherText = "Lorem ipsum"; </script> </script>
<div class="text"> <p>{anotherText}</p></div>
In this example, the component named Text
receives an anotherText
property, which defaults to "Lorem ipsum". This ensures that if no value is received from the parent component, a text will still be displayed.
Once the component is created, the next step is to integrate it into your main application.
import
statement to add it to your application.<script> import Text from './components/Text.svelte'; </script>
<Text anotherText="Hello" />
Here, the Text
component is imported and passed the anotherText
property with the value "Hello".
Svelte allows multiple properties to be passed through an object using the propagation technique. This method can simplify the handling of multiple properties.
<script> const data = { name: "Óscar", lastName: "Barajas", age: 31 };</script>
<script> import Person from './components/Person.svelte'; </script>
<Person {...data} />
Using the {...}
braces propagates all values from the data
object to the Person
component.
With properties propagated into the receiving component, they must be set using export let
, and then represented as needed within the component.
<script> export let name; export let lastName; export let age; </script> </script>
<div class="person"> <p>{name} {lastName}, {age}</p></div> </div>
By properly structuring the properties in the child component, you can break them down and use them efficiently and clearly.
Working with components and properties in Svelte is an essential skill for any developer who wants to create modern, efficient applications. Keep exploring and improving your Svelte skills to fully master this powerful framework.
Contributions 17
Questions 4
🐪 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
La podemos realizar mediante dos formas:
// Componente padre App.svelte
<main>
...
<Text anotherText="Hello!" />
...
</main>
// 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
Want to see more contributions, questions and answers from the community?