Comment travailler avec des déclarations réactives dans Svelte
Dans Svelte, vous pouvez écouter les modifications de l'état des composants et mettre à jour d'autres variables.
Par exemple, si vous avez uncount
variable:
<script>
let count = 0
</script>
et vous le mettez à jour en cliquant sur un bouton:
<script>
let count = 0
const incrementCount = () => {
count = count + 1
}
</script>
{count} <button on:click={incrementCount}>+1</button>
Vous pouvez écouter les changements surcount
en utilisant la syntaxe spéciale$:
qui définit un nouveau bloc que Svelte réexécutera lorsqu'une variable référencée dans celui-ci change.
Voici un exemple:
<script>
let count = 0
const incrementCount = () => {
count = count + 1
}
$: console.log(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
)
</script>
{count} <button on:click={incrementCount}>+1</button>
J'ai utilisé le bloc:
$: console.log(`${count}`)
Vous pouvez en écrire plusieurs:
<script>
$: console.log(`the count is ${count}`)
$: console.log(`double the count is ${count * 2}`)
</script>
Et vous pouvez également ajouter un bloc pour regrouper plusieurs instructions:
<script>
$: {
console.log(`the count is ${count}`)
console.log(`double the count is ${count * 2}`)
}
</script>
J'ai utilisé un appel console.log () là-dedans, mais vous pouvez également mettre à jour d'autres variables:
<script>
let count = 0
let double = 0
$: {
console.log(the count is </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
)
double = count * 2
console.log(double the count is </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">double</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
)
}
</script>
Téléchargez mon gratuitManuel de Svelte
Plus de tutoriels sveltes:
- Premiers pas avec Svelte - un court tutoriel
- Comment travailler avec des accessoires dans Svelte
- Comment importer des composants dans Svelte
- Comment exporter des fonctions et des variables à partir d'un composant Svelte
- Modèles Svelte: logique conditionnelle
- Comment renvoyer un composant Svelte à la demande
- Machines à sous Svelte
- Comment ajouter des commentaires dans les modèles Svelte
- Fixations Svelte
- Gestion des mises à jour d'état dans Svelte
- Déclarations réactives dans Svelte
- Événements du cycle de vie Svelte
- Modèles Svelte: boucles
- Résoudre les promesses dans les modèles Svelte
- Travailler avec des événements dans Svelte
- Gestion des états inter-composants dans Svelte
- Comment accéder à un paramètre d'URL dans Sapper en dehors du module de script
- Comment appliquer dynamiquement CSS dans Svelte
- Comment rediriger vers une URL dans Sapper
- Comment simuler une boucle for dans les modèles Svelte