如何将所有事件作为道具传递给svelte中的组件

Question

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>

Answer 1

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.