Event forwarding works for DOM events too.
We want to get notified of clicks on our <CustomButton>
— to do that, we just need to forward click
events on the <button>
element in CustomButton.svelte
:
<button on:click>
Click me
</button>
App.svelte
CustomButton.svelte
xxxxxxxxxx
9
1
<script>
2
import CustomButton from './CustomButton.svelte';
3
4
function handleClick() {
5
alert('clicked');
6
}
7
</script>
8
9
<CustomButton on:click={handleClick}/>
Console
xxxxxxxxxx
57
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
create_component,
5
destroy_component,
6
init,
7
mount_component,
8
noop,
9
safe_not_equal,
10
transition_in,
11
transition_out
12
} from "svelte/internal";
13
14
import CustomButton from "./CustomButton.svelte";
15
16
function create_fragment(ctx) {
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */