$$props and $$restProps
In runes mode, getting an object containing all the props that were passed in is easy, using the $props
rune.
In legacy mode, we use $$props
and $$restProps
:
$$props
contains all the props that were passed in, including ones that are not individually declared with theexport
keyword$$restProps
contains all the props that were passed in except the ones that were individually declared
For example, a <Button>
component might need to pass along all its props to its own <button>
element, except the variant
prop:
<script>
export let variant;
</script>
<button {...$$restProps} class="variant-{variant} {$$props.class ?? ''}">
click me
</button>
<style>
.variant-danger {
background: red;
}
</style>
In Svelte 3/4 using $$props
and $$restProps
creates a modest performance penalty, so they should only be used when needed.
previous next