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

【问题标题】：How to pass all event down as props to a component in svelte如何将所有事件作为道具传递给svelte中的组件
【发布时间】：2022-01-01 16:15:42
【问题描述】：

我在 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>

【问题讨论】：

标签： javascript svelte svelte-component

【解决方案1】：

层次结构是App => Outer => Inner

应用：

<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 issue 以允许on:* 语法。遗憾的是它尚未实施。

【讨论】：

我已经在某处看到过这个例子，问题是如果我希望所有事件都可用，我需要一个一个地传递它们作为道具，我想传递所有其中
我已经编辑了我的答案，看看，这条评论似乎暗示可能有一些非官方的方式来做you're trying to achieve和this comment可能值得探索的事情
你不能让子组件监听事件并导出它的事件监听函数，以便可以通过一个道具覆盖它吗？ Like this
似乎这可能是避免道具地狱的潜在方法，我可以将您的建议添加到我的答案中吗？