-
When binding the
—but as soon as you remove the Note
App.Svelte <script lang="ts">
import Button from './Button.svelte'
import Component from './Component.svelte'
let component: Component = $state(null!)
</script>
<Button onclick={component.hind} disabled={true}/>
<Component bind:this={component}/> Button.svelte <script lang="ts">
let {onclick, ...props}: {onclick: () => void} = $props()
</script>
<button onclick={onclick} {...props}>Test</button> Component.svelte <script lang="ts">
export function hind() {}
</script>
<div></div> |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
Try |
Beta Was this translation helpful? Give feedback.
-
If you use Note that the button code would then error because the <script lang="ts">
let props = $props();
</script>
<button {...props}>Test</button> One of the reasons why handlers are part of the props now, is that they should be spreadable like any other attribute. |
Beta Was this translation helpful? Give feedback.
Without the spread, the access is deferred to within a new function:
With the spread, the handler is accessed more directly, causing the error:
These are implementation details and it should be considered a pure coincidence that one of the cases does not blow up. You should not use
component.hind
either way.