Comment travailler avec des accessoires dans Svelte

Apprenez à travailler avec des accessoires dans Svelte et laissez deux composants avec une relation parent / enfant communiquer entre eux

Vous pouvez importer un composant Svelte dans n'importe quel autre composant en utilisant la syntaxeimport ComponentName from 'componentPath':

<script>
import SignupForm from './SignupForm.svelte';
</script>

Le chemin est relatif au chemin actuel du composant../signifie «ce même dossier». Vous utiliseriez../pour revenir en arrière d'un dossier, et ainsi de suite.

Une fois que vous faites cela, vous pouvez utiliser le composant nouvellement importé dans le balisage, comme une balise HTML:

<SignupForm />

De cette façon, vous formez une relation parent / enfant entre les deux composants: celui qui importe et celui qui est importé.

Souvent, vous souhaitez que le composant parent transmette des données au composant enfant.

Vous pouvez le faire en utilisantaccessoires. Les accessoires se comportent de la même manière que les attributs en HTML simple et constituent une forme de communication à sens unique.

Dans cet exemple, nous passons ledisabledprop, en passant la valeur JavaScripttrueà lui:

<SignupForm disabled={true}/>

Dans le composant SignupForm, vous devezexportationledisabledprop, de cette manière:

<script>
  export let disabled
</script>

C'est ainsi que vous exprimez le fait que l'accessoire est exposé aux composants parents.

Lors de l'utilisation du composant, vous pouvez passer une variable au lieu d'une valeur, pour la modifier dynamiquement:

<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
</script>

<SignupForm disabled={disabled}/>

Quand ledisabledla valeur de la variable change, le composant enfant sera mis à jour avec la nouvelle valeur prop. Exemple:

<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
setTimeout(() => { disabled = false }, 2000)
</script>

<SignupForm disabled={disabled}/>

Téléchargez mon gratuitManuel de Svelte


Plus de tutoriels sveltes: