时间戳

首页 > 解决方案 > Svelte：使用调度程序进行事件转发与传入处理函数，哪个是最佳实践？

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

问题描述

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

方法一：使用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);
}

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

问题

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

标签： svelte

解决方案

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

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

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

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

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

推荐阅读