Svelte, usiamo i componenti

S

Introduzione

Oggi volevo fare uno step in più rispetto al precedente articolo e ho pensato di creare una piccola app d’esempio per farvi capire come strutturare il nostro progetto a componenti. Ecco che quindi ho creato un’applicazione meteo e qui potete trovare il codice GitHub .

STRUTTURA APPLICATIVA

Iniziamo ad analizzare subito il componente padre App.svelte

--- App.svelte ---
...
...
import './App.css';
import LeftPanel from './components/LeftPanel.svelte';
import RightPanel from './components/RightPanel.svelte';
...
...

Nella parte iniziale del file vediamo che ci sono 3 import. Il primo importa il file css che descrive lo stile della nostra app App.css, il secondo importa il nostro primo componente LeftPanel.svelte ed il terzo invece importa il terzo componente RightPanel.svelte. Quindi il componente App.svelte sarà il padre mentre LeftPanel.svelte e RightPanel.svelte saranno i figli.

COMPONENTI FIGLI
--- LeftPanel.svelte --- 
<script>
  import { createEventDispatcher } from 'svelte';

  export let date;
  export let city = 'Paris';
  export let img = 'images/cloudy.png';
  export let deg = '15';

  const dispatch = createEventDispatcher();

  const onClick = () => {
    dispatch('message', { data: 'click from child!' });
  };
</script>

<div class="left-panel panel">
  <div class="date">{date}</div>
  <div class="city">{city}</div>
  <div class="temp">
    <img src={img} alt="" width="60" on:click={onClick} />
    {deg}&deg;
  </div>
</div>
--- RightPanel.svelte ---
<script>
  export let cityImg = 'images/london.png';
  const componentFunctions = () => {
    console.log('component log');
  };
</script>

<div class="right-panel panel">
  <img src={cityImg} alt="" width="120" on:click={componentFunctions} />
</div>

I componenti figli per essere “abilitati” a ricevere input devono dichiarare tramite il costrutto export la variabile che accetterà i valori passati dal padre App.svelte.Inoltre, nel caso non venga passato alcun valore dal padre, sarà anche possibile definire un valore di default. Ne troviamo esempio nel componente LeftPanel.svelte con export let city = ‘Paris’; oppure export let img = ‘images/cloudy.png’;

INPUT ED oUTPUT

I componenti figli possono ricevere delle variabili in input e dei metodi per gestire la comunicazione in output. Ho definito alcune variabili e un metodo nel componente padre App.svelte per dimostrarvi come utilizzarli nei vari componenti.

--- App.svelte ---
let currentDate = new Date().toLocaleTimeString();
let city = 'London';
let data = {
  img: 'images/sun.png',
  deg: '22',
};
let cityImg = 'images/parigi.png';

const parentFunctions = (event) => {
  console.log(`parent log - ${event.detail.data}`);
};
PASSAGGIO INPUT

Qui di seguito ho riportato la dichiarazione dei due componenti e ho simulato i diversi modi in cui possiamo passare gli input.

--- App.svelte ---
...
...
<div class="widget">
  <LeftPanel date={currentDate} {city} on:message={parentFunctions} />
  <RightPanel />
</div>
<div class="widget">
  <LeftPanel date={currentDate} {...data} />
  <RightPanel {cityImg} />
</div>
...
...

Possiamo quindi passare il valore in questa modalità date={currentDate}dove “date” è la variabile del componente figlio e “currentDate” quella del componente padre. Se le variabili definite nel figlio e nel padre hanno lo stesso nome (caso della variabile “city”) possiamo semplicemente definire l’input così: {city}. Possiamo anche avvalerci dello spread operator per passare più valori in un’unica istruzione come nel caso di {…data}. La variabile “data” del componente padre contiene sia “img” che “deg” che sono entrambe input del componente figlio LeftPanel.svelte.

PASSAGGIO OUTPUT

Gli output permettono la comunicazione tra componenti. Nel nostro caso con questo codice presente nel componente padre App.svelte

<LeftPanel date={currentDate} {city} on:message={parentFunctions} />

ci mettiamo in ascolto dell’evento “message” che il componente LeftPanel.svelte può emettere. Dichiariamo inoltre che all’emissione di tale evento vogliamo eseguire il nostro metodo parentFunctions che eseguirà un semplice console.log

const parentFunctions = (event) => {
  console.log(`parent log - ${event.detail.data}`); 
};
EMISSIONE EVENTO

Ma come fa il componente LeftPanel.svelte ad emettere l’evento “message”?

Il componente utilizzando il metodo dispatch offerto dalla libreria svelte può emettere l’evento e quindi notificare il padre.

--- LeftPanel.svelte ---
...
...
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
const onClick = () => {
  dispatch('message', { data: 'click from child!' });
};
...
...

Ai fini della demo anche nel componente RightPanel.svelte ho implementato un evento click, ma esso eseguirà solo un evento interno al componente.

--- RightPanel.svelte ---
...
...
const componentFunctions = () => {
  console.log('component log');
};
...
...
<img src={cityImg} alt="" width="120" on:click={componentFunctions} />
...
...

RISULTATO FINALE

Conclusioni

Abbiamo visto come passare input ed output tra componenti. Spero che l’articolo sia piaciuto, alla prossima.

A proposito di me

Giorgio Boa

Giorgio é uno sviluppatore a tutto tondo, ma il frontend è la sua passione.
Ha iniziato a sviluppare nel lontano 2006 e nel 2012 si é innamorato di JavaScript.
É molto attivo anche nel mondo open source e ama studiare e imparare cose nuove.
Molto ambizioso e cerca di migliorarsi giorno dopo giorno uscendo dalla sua comfort zone e infatti attualmente sviluppa backend a microservizi in Java Spring.

Di Giorgio Boa

I nostri Partner

Gli articoli più letti

Articoli recenti

Commenti recenti