$$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:
$$propscontains all the props that were passed in, including ones that are not individually declared with theexportkeyword$$restPropscontains 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.
Edit this page on GitHub llms.txt
previous next