Menu
I want to receive arbitrary props from "above" and spread them onto an <input>, as shown here where inputProps would become an object containing any additional props set on this component (similar to python's **kwargs, in case you're familiar):
<script>
export let id;
export ...inputProps;
</script>
<div>
id: {id}
<input {...inputProps} />
</div>
Can you point me toward the correct Svelte mechanism for accomplishing something like this? I have a feeling that I'm asking the wrong question, but I need a svelte developer to set me straight. Should I use a slot instead? Or learn about actions / "the use directive"?
376
The solution. To pass Svelte components dynamically down to a child component you have to use Svelte's <svelte:component> directive. <svelte:component> accepts a property called this . If the property this has a component attach to it than it will render the given Svelte component.
In a Svelte component, prefixing a statement with $: marks the statement as reactive — it will run whenever the variables referenced in that statement change. Here's a classic example. Whenever num changes, doubled is automatically set to the correct value.
Exporting a Svelte component </h1> ); export default GreetMessage; Once you've created your class or functional React component, you must use the export keyword or you can use export default to export that React component. In Svelte, by default it's exported as soon you create your Svelte file!
Svelte uses the export keyword to mark a variable declaration as a property or prop, which means it becomes accessible to consumers of the component (see the section on attributes and props for more information). You can specify a default initial value for a prop.
Svelte now also offers $$restProps. See the Svelte API Docs - Attributes and props.
$$props references all props that are passed to a component – including ones that are not declared with export. It is useful in rare cases, but not generally recommended, as it is difficult for Svelte to optimise.
<Widget {...$$props}/>
$$restProps contains only the props which are not declared with export. It can be used to pass down other unknown attributes to an element in a component.
<input {...$$restProps}>
You can use $$props to access all the props given to a component.
$$propsreferences all props that are passed to a component – including ones that are not declared withexport. It is useful in rare cases, but not generally recommended, as it is difficult for Svelte to optimise.
Example (REPL)
<!-- App.svelte -->
<script>
import Child from './Child.svelte';
</script>
<Child id="foo" placeholder="bar" />
<!-- Child.svelte -->
<script>
let id, inputProps;
$: ({ id, ...inputProps } = $$props);
</script>
<div>
id: {id}
<input {...inputProps} />
</div>
While exporting you don't need to use the spread operator
<script>
export let id;
export inputProps;
</script>
<div>
id: {id}
<input {...inputProps} />
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
