在 Svelte 中的嵌套组件中分派/转发事件的正确方法是什么？

Question

我很好奇，在 Svelte JS 组件树的多个级别之间转发或分派事件的最佳方法是什么？

假设我有 App.Svelte、一些中间数字级别（每个级别包含一个子组件）和 Modal.Svelte。如果我想将事件从 Modal 转发或分派到应用程序，正确的方法是什么？

据我了解，Svelte 中的事件转发将遍历组件树并将事件转发到引用转发事件的第一个父级。（这是正确的解释吗？）

使用事件调度方法，每个嵌套组件需要 1/ 导入 createEventDispatcher，2/ 创建调度程序变量，3/ 定义一个用于调度事件的函数。然后父级需要导入该函数并在标记内引用它，例如<p>. （它是否正确？）

如果我在上述两点上都是正确的，我想知道是否没有更简化的方法，例如将事件连接到存储，这将有效地展平组件树，以便任何组件都可以接收转发的事件。尽管我认为如果多个组件引用相同的转发事件，这可能会导致一些难以调试的行为。

Answer 1

要将事件从子组件或 DOM 元素转发到父组件，您只需定义一个on:eventwithout 处理程序。例如

<button on:click >
<Component on:open >

无需createEventDispatcher仅用于转发。

如果您想更广泛地共享事件，您可以创建EventTarget并通过它发送事件。由于订阅不会在模板中发生 via on:event，因此您必须确保再次删除侦听器。您还可以使用上下文将对象公开给组件层次结构的子树。

或者，事件可以直接分派到 DOM 元素，此类事件将在整个元素层次结构中冒泡（如果在事件选项中启用）。

someElement.dispatchEvent(
  new CustomEvent('my-event', { bubbles: true })
);

如果您直接或通过冒泡将事件分派到window，您可以使用以下方式更方便地订阅这些事件svelte:window：

<svelte:window on:my-event={() => ...} />

（当组件被销毁时，这些处理程序会自动删除。）