Créer un composantpermalink
ts
constcomponent = newComponent (options );
Un composant client-side est une classe JavaScript correspondant à un composant compilé avec l'option generate: 'dom'
(ou avec l'option generate
non spécifiée).
ts
importApp from './App.svelte';constapp = newApp ({target :document .body ,props : {// en supposant que App.svelte contienne :// `export let answer`:answer : 42}});
Les options d'initialisation suivantes peuvent être utilisées :
option | défaut | description |
---|---|---|
target |
none | Un élément HTMLElement ou ShadowRoot sur lequel rendre le composant. Cette option est obligatoire |
anchor |
null |
Un enfant de la cible target à rendre juste avant le composant |
props |
{} |
Des propriétés avec lesquelles le composant sera initialisé |
context |
new Map() |
Une Map de paires clé-valeur de contexte à fournir au composant |
hydrate |
false |
Voir plus bas |
intro |
false |
Si true , jouera les transitions au premier rendu, plutôt que d'attendre de futurs changements d'état |
Les enfants existants de la cible target
ne sont pas affectés.
L'option d'hydratation hydrate
indique à Svelte de mettre à jour le DOM existant (habituellement à partir du SSR) plutôt que de créer de nouveaux éléments. Cela ne fonctionnera que si le composant a été compilé avec l'option hydratable: true
. L'hydratation de la section <head>
ne fonctionnera que si le code généré côté serveur a également été compilé avec l'option hydratable: true
. Cette option a pour effet d'identifier chaque élément à l'intérieur de la section <head>
de telle sorte que le composant sache quels éléments il peut supprimer pendant l'hydratation.
Alors que les enfants de la cible target
ne sont normalement pas modifiés, l'option hydrate: true
causera leur suppression. Pour cette raison, l'option anchor
ne peut pas être utilisée en même temps que hydrate: true
.
Le DOM existant n'a pas besoin de correspondre au composant, Svelte "réparera" le DOM au fur et à mesure.
ts
importApp from './App.svelte';constapp = newApp ({target :document .querySelector ('#server-rendered-html'),hydrate : true});
$setpermalink
ts
component .$set (props );
$set
définit programmatiquement les props d'une instance de composant. component.$set({ x: 1 })
est équivalent à x = 1
à l'intérieur de la balise <script>
du composant.
L'appel de cette méthode déclenchera une mise à jour à la prochaine micro-tâche — le DOM n'est pas mis à jour de manière synchrone.
ts
component .$set ({answer : 42 });
$onpermalink
ts
component .$on (ev ,callback );
$on
enregistre un callback qui sera appelé à chaque génération d'un évènement de type event
.
$on
retourne une fonction dont l'exécution permet de supprimer l'écoute de cet événement.
ts
constoff =component .$on ('selected', (event ) => {console .log (event .detail .selection );});off ();
$destroypermalink
ts
component .$destroy ();
Retire un composant du DOM et déclenche les callbacks de type onDestroy
associés.
Props de composantpermalink
ts
component .prop ;
ts
component .prop =value ;
Si un composant est compilé avec l'option accessors: true
, chaque instance sera générée avec des getters et setters correspondant à chacune de ses props. Mettre à jour une des props déclenchera une mise à jour synchrone. Ce comportement est différent de la mise à jour asynchrone déclenchée par l'appel component.$set(...)
.
Par défaut, accessors
est initialisé à false
, à moins que vous ne compiliez un web component.
ts
console .log (component .count );component .count += 1;
ts
console .log (component .count );component .count += 1;