Skip to content

Commit

Permalink
docs: Add spread guidance for multiple event handlers (#13240)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
  • Loading branch information
GeoffCox and Rich-Harris authored Sep 16, 2024
1 parent 3c97c0a commit 3d25672
Showing 1 changed file with 14 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down

0 comments on commit 3d25672

Please sign in to comment.