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

【问题标题】：How can I make use of Event Delegation in a parent Svelte Component如何在父 Svelte 组件中使用事件委托
【发布时间】：2019-09-17 07:53:25
【问题描述】：

在本例中，如果我单击教程导航项，我将进入教程部分。在这里，我在每个导航项上转发一个自定义单击事件，在其中设置已单击的段。在 app.svelte 中，我拉入 NavItem 组件并将段设置为当前，这会告诉导航组件（通过 Props），哪个段是当前的并且需要处于活动状态。

我的问题是如何利用事件委托，让导航组件监听点击事件，所以感觉不那么重复

【问题讨论】：

【解决方案1】：

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

在 NavItem.svelte 中

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

【讨论】：

是的，就是这样，我以某种方式认为它只读用于获取上下文，但您实际上可以在那里设置它。谢谢你。我有些搞砸了repl
好的，这是您的解决方案的示例。谢谢svelte.dev/repl/691e82ee168549c782b61c355e78cf9b?version=3.12.1
还有一件事，我可以处理来自父节点的事件，就像你在 vanilla js 中使用 current.target 时一样。让 Nav 监听 Nav 组件内的点击事件？
另请注意，建议的解决方案非常适合您的特定问题，如果您希望 Nav 组件在更改时触发事件，则必须使 current一个可写的（参见svelte.dev/docs#writable）并附加一个触发事件的订阅事件。