如何在父级 Svelte 组件中使用事件委托

Question

在此示例中，如果我单击教程 NavItem，我将转到教程部分。在这里，我在每个 Nav Item 上转发了一个自定义点击事件，我在其中设置了被点击的部分。在 app.svelte 中，我拉入 NavItem 组件并将段设置为当前，这会告诉 Nav 组件（通过 Props），哪个段是当前的并且需要激活。

我的问题是如何使用事件委托，让 Nav 组件监听点击事件，这样就不会感觉那么重复

最小的例子是这样的，我想让父级处理事件？： https://svelte.dev/repl/691e82ee168549c782b61c355e78cf9b?version=3.12.1

这是一个复杂的例子。回复： https://svelte.dev/repl/691e82ee168549c782b61c355e78cf9b?version=3.12.1

Answer 1

我看到您已经在使用 getContext 和 setContext 功能。您可以简单地更新该上下文，而不是触发事件：

在NavItem.svelte

function setSegment(){
    current.set(segment);
 }

如何在父级 Svelte 组件中使用事件委托

How can I make use of Event Delegation in a parent Svelte Component

event-handling

addeventlistener

svelte