Svelte：使用调度程序转发事件与传入处理函数，哪个是最佳实践？

Question

假设外部组件包含内部组件，并且我们希望将内部组件中的事件传播到外部组件。如果不使用商店，有两种方法可以做到这一点：

方法一：使用调度程序进行事件转发

Inner.svelte：使用 Svelte 的调度程序来调度原始事件的重新打包版本：

<input type="text" on:input={callDispatcher} />

const dispatcher = createEventDispatcher();

function callDispatcher(e) {
    dispatcher("mymsg", {
        foo: e.target.value
    });
}

Outer.svelte：监听 Inner 的调度事件：

<Inner on:mymsg={handler} />

function handler(e) {
    alert(e.detail.foo);
}

方法2：将Outer的handler直接传递给Inner

Inner.svelte：接受 Outer 传入的处理程序：

export let externalHandler;
<input type="text" on:input={externalHandler} />

Outer.svelte：当感兴趣的 Inner 事件发生时，它将调用 Outer 的处理程序：

<Inner externalHandler={handler} />

function handler(e) {
    alert(e.target.value);
}

问题

哪一种是更好的做法？方法1的调度程序似乎是一个不必要的中间层，不仅增加了更多的代码，而且还丢失了原始的事件信息。但奇怪的是，Svelte 教程提到了方法 1，而不是方法 2。

Answer 1

没有真正的区别，您确实可以同时使用两者。但是，方法 2 不适用于本机元素，因此您需要混合使用两种方法，并且得到如下所示的 cod：

<Child clickHandler="{childClick}" />
<button on:click="{buttonClick}">click</button>

您始终必须记住何时使用哪一个，而如果您使用调度程序方法，则这将始终是相同的

<Child on:click="{childClick}" />
<button on:click="{buttonClick}">click</button>

额外的调度程序代码是对此的权衡。

Answer 2

我发现使用function prop更简单、更惯用，并且大多数时候对我来说都能优雅地完成这项工作。

<!-- App.svelte -->
<Button onClick={handleClick}></Button>

<!-- Button.svelte -->
<button on:click={onClick}>
  Click me
</button>

我使用事件转发的唯一情况是当我需要......好吧......事件转发时。:)（来自深层嵌套组件）

<!-- App.svelte -->
<Outer on:customEvent={handleCustomEvent} />

<!-- Outer.svelte -->
<Inner on:customEvent />

<!-- Inner.svelte -->
<Button on:customEvent />

<!-- Button.svelte -->
<button on:click={() => dispatch('customEvent')}>
  Click me
</button>

参考：https://www.donielsmith.com/blog/2020-04-21-props-vs-event-dispatcher-svelte-3/

免责声明：我是 Svelte 的新手，来自 React。

Answer 3

添加链接到为什么使用 createEventDispatcher？（Svelte GitHub Issue）评论很好地涵盖了这一点，恕我直言：

\n

\n

通过使用createEventDispatcher，您可以告诉编译器编译您的组件，使其发出的任何事件都遵循典型的 CustomEvent 接口。如果您只是使用 Svelte，这并不是什么大问题，但我认为，如果您正在编译 Svelte 组件以在其他地方用作 Web 组件，那么您编译的组件将使用其他框架能够理解的接口进行编译（ \xe2\x80\xa6)。

\n

\n

这是有道理的。

\n

在该线程的前面：

\n

\n

现在（2019 年 3 月）在 Svelte 3 中使用回调属性要容易得多，因此您可能会更少地使用事件。

\n

\n

这表明两者共存可能存在某种进化原因。

\n

还有一件事：对于事件，事件与自定义事件接口和包装相关.detail（这就是重点！）。这对于外部组件来说似乎是额外的复杂性，而通过函数引用，我们可以设计出更简洁的 API。

\n

如果最终进行函数引用，请注意<Thing1 {onClick} />链接问题中的简写。

\n\n

编辑：看起来没那么简单。事件不是从组件发出的...（于 2019 年 6 月开放）表明 Svelte 事件在 Web 组件中并不完全可用。在这个问题得到解决之前，调度可能会陷入两个世界之间。不太标准。确实不是定制的。

\n