I'm creating some custom components in svelte and I didn't understood how to pass events as props such as on:click, on:mouseup, on:whatever, I tried in the followings way but they didn't work:
// button.svelte
// OnClick it's a prop but in this way, I need to pass every single event manually
<div on:click={OnClick} ></div>
or
// button.svelte
// I tried even in this way but it didn't really work
<div {...$$restProps} {...$$props} ></div>
The hierarchy is App => Outer => Inner
App:
<script>
import Outer from './Outer.svelte';
function handleMessage(event) {
alert(event.detail.text);
}
</script>
<Outer on:message={handleMessage}/>
Outer:
<script>
import Inner from './Inner.svelte';
</script>
<Inner on:message />
Inner:
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sayHello() {
dispatch('message', {
text: 'Hello!'
});
}
</script>
<button on:click={sayHello}>
Click to say hello
</button>
Now, this to me is event bubbling up. If you're trying to do it in a reverse way.. I'm not so sure you can achieve that. Data is passed down, events bubble up.
When it comes to trying to send all events in one big go, there seems to be this svelte github issue created to allow on:* syntax. Sadly it isn't yet implemented.