从插槽组件发出的事件

Question

我尝试将应用程序包装到“存储库”组件中，并且外部组件应处理与后端的所有通信，例如加载，更新，删除可编辑数据。我以为我可以将事件发送到该Repository组件，但是我没有按照我的方式工作。有谁发现问题或可以解释，为什么这不起作用以及如何通过事件正确解决？我可以改用可写对象，但事件会使它更具可读性。这是一个简化的示例和一个精巧的REPL链接：

https://svelte.dev/repl/e1eae56c7d5e48b2a99299f1bc1bf970?version=3.22.3

App.svelte：

<script>
    import Repository from './Repository.svelte'
    import Application from './Application.svelte'
</script>

<Repository>
    <Application on:save={() => console.log('caught in App')} />
</Repository>

Repository.svelte：

<div on:save={() => console.log('caught in Repository')}>
    <slot></slot>
</div>

Application.svelte：

<script>
    import {createEventDispatcher} from 'svelte'

    const dispatch = createEventDispatcher();

    function saveHandler() {
        console.log('dispatching')
        dispatch('save')
    }

</script>

<button on:click={saveHandler}>
    Save
</button>

所需的输出将是

dispatching
caught in Repository

但仅打印

dispatching
caught in App

单击按钮时。

Answer 1

找到了至少一个解决方案，let指令可以提供帮助，尽管它不是纯粹的事件，而且很冗长。

https://svelte.dev/repl/a03214d522cd4bcba67f86c426a3b28d?version=3.22.3

App.svelte：

<script>
    import Repository from './Repository.svelte'
    import Application from './Application.svelte'
</script>

<Repository let:saveHandler={saveHandler}>
    <Application on:save={saveHandler} />
</Repository>

Repository.svelte：

<script>
    function saveHandler() {
        console.log('caught in Repository')
    }
</script>

<div>
    <slot {saveHandler}></slot>
</div>

Application.svelte：

<script>
    import {createEventDispatcher} from 'svelte'

    const dispatch = createEventDispatcher();

    function saveHandler() {
        console.log('dispatching')
        dispatch('save')
    }

</script>

<button on:click={saveHandler}>
    Save
</button>

缺点（或缺点）是，我们必须使用主要组件上的let指令公开存储库中的所有方法，并在该组件中捕获事件，这可能会导致许多不需要的事件转发（因为事件只会冒出气泡一个级别）。