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

Question

我正在svelte中创建一些自定义组件，但我不知道如何将事件作为道具传递，例如on:click、on:mouseup、on:whatever，我尝试了以下方式，但它们都不起作用：

// button.svelte
// OnClick it's a prop but in this way, I need to pass every single event manually
<div on:click={OnClick} ></div>

或

// button.svelte
// I tried even in this way but it didn't really work
<div  {...$$restProps} {...$$props} ></div>

Answer 1

层次结构为App=>外部=>内部

应用程序：

<script>
    import Outer from './Outer.svelte';
    function handleMessage(event) {
        alert(event.detail.text);
    }
</script>
<Outer on:message={handleMessage}/>

外部：

<script>
    import Inner from './Inner.svelte';
</script>
<Inner on:message />

内部：

<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    function sayHello() {
        dispatch('message', {
            text: 'Hello!'
        });
    }
</script>
<button on:click={sayHello}>
    Click to say hello
</button>

现在，对我来说，这是一个冒泡的事件。如果你试图用相反的方式来做。。我不太确定你能不能做到。数据在传递，事件在冒泡。

当试图一次性发送所有事件时，似乎有一个svelte github问题是为了允许on:*语法而创建的。遗憾的是，它还没有实施。