CODEWITHSUNDEEP
sveltesveltekitsvelte-3svelte-component
jeff
jeff

Reputation: 1020

How to pass a component as a prop in another component in svelte

I have 2 components - Slider Component and Button Component

Following is the Button component

<script>
  export button_type, custom_class, clickHander;
</script>


<button type={button_type} class= "{custom_class} on:click="{clickHandler}"
  <span>{buttonType.button_text}</span>
</button>

I am using the above Button component in Slider Component

<script>
import Button from './file_path'

</script>
<div>
   <h1>I am slider</h1>
   <Button />
</div>

My objective is to use this Slider component in the App.svelte (root) and pass the props to Button from App.svelte

How can I achieve this?

Upvotes: 1

Views: 1936

Answers (2)

Cl&#233;ment P&#233;au
Cl&#233;ment P&#233;au

Reputation: 323

Use [restProps][1], all props that are not declared by the component will be put into this object.

This enable you to do

<script>
  export button_type, custom_class, clickHander;
</script>


<button {$$restProps} type={button_type} class= "{custom_class} on:click="{clickHandler}"
  <span>{buttonType.button_text}</span>
</button>

<script>
import Button from './file_path'

</script>
<div>
   <h1>I am slider</h1>
   <Button name="mybutton" autofocus={true}/>
</div>

Declare props if you want to use them in your component otherwise just pass them through via $$restProps.
[1]: https://svelte.dev/docs/basic-markup#attributes-and-props

Upvotes: 0

brunnerh
brunnerh

Reputation: 184376

You could declare a property which is then spread on the Button.

<script>
    import Button from './Button.svelte'

    export let buttonProps;
</script>
<div>
   <h1>I am slider</h1>
   <Button {...buttonProps} />
</div>

<!-- In App -->
<Slider buttonProps={{ button_text: 'OK', clickHandler: () => alert('!') }} />

REPL

You can of course also declare individual properties and pass them on as needed.

Upvotes: 1

Related Questions