Introducción a los componentes de Svelte.js

Introducción a los componentes de Svelte.js |  Reaccionar

En este tutorial aprenderemos a crear componentes en svelte.

Índice
  1. Componentes
  2. Componentes anidados

Componentes

Los componentes son la parte reutilizable de la interfaz de usuario que podemos crear una vez y reutilizar en nuestra aplicación.



componentes-live-example-demo

En svelte podemos crear componentes creando un archivo con .svelte extensión cada componente esbelto consta de html,css and javascript.

Escribamos nuestro primer componente esbelto.

MiprimerComponente.svelte

<script>
    let name = "component"
</script>

<style>
   h1{
       color:red;
   }
</style>

<h1>My first {name}</h1>

En el código anterior, hemos creado nuestro componente llamado MyfirstComponent.svelte donde contiene
html,css and javascript.

guion: En la etiqueta del script, necesitamos escribir código relacionado con javascript.

estilo: En la etiqueta de estilo, necesitamos escribir código CSS (los estilos están delimitados).

los { } la llave se usa para interpolar datos de javascript en el marcado.

Nota: Los datos presentes dentro del script solo se puede acceder dentro del componente.

Componentes anidados

Es difícil crear una aplicación completa en un solo componente para poder importar y usar un componente en otros componentes. Veamos un ejemplo.

MisegundoComponente.svelte

<script>
    import MyfirstComponent from './MyfirstComponent.svelte'</script>

<style>
</style>

<div>
    <h1>My second component</h1>
    <MyfirstComponent/></div>

En el script, importamos el MyfirstComponent y lo agregó al marcado, al igual que el elemento html.



anidamiento-de-componentes-esbeltos

Si quieres conocer otros artículos parecidos a Introducción a los componentes de Svelte.js puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas