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

Question

假设一个外部组件包含一个内部组件，我们希望将来自内部组件的事件传播到外部组件。在不使用商店的情况下，有两种方法可以做到这一点:

方法一:使用dispatcher进行事件转发

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);
}

方法二:将Outer的handler直接传递给Inner

Inner.svelte:接受外部传入的处理程序:

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

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

<Inner externalHandler={handler} />

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

题

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

Answer 1

没有真正的区别，您确实可以同时使用两者。
但是，方法 2 不适用于原生元素，让您混合使用这两种方法，您会得到如下代码:

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

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

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

额外的调度程序代码是一种权衡。