docs: Add spread guidance for multiple event handlers (#13240)

* Update 04-event-handlers.md

Added documentation on managing multiple event handlers and spreading props.

* Update 04-event-handlers.md

Used spread variable rather than implying there was a props variable from $props above.

* tweak

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
pull/13257/head
Geoff Cox 3 months ago committed by GitHub
parent 3c97c0a1a1
commit 3d256727bb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -178,6 +178,20 @@ Duplicate attributes/properties on elements — which now includes event handler
</button>
```
When spreading props, local event handlers must go _after_ the spread, or they risk being overwritten:
```svelte
<button
{...props}
onclick={(e) => {
doStuff(e);
props.onclick?.(e);
}}
>
...
</button>
```
## Why the change?
By deprecating `createEventDispatcher` and the `on:` directive in favour of callback props and normal element properties, we:

Loading…
Cancel
Save