苗条组件中的事件处理

【问题标题】：event handling in svelte component苗条组件中的事件处理
【发布时间】：2019-12-31 17:37:11
【问题描述】：

假设我们创建了一个名为 MyAnchor 的自定义元素，它将具有单击事件处理程序，并拦截单击，并且对于某些人，我们将具有自定义对话框，那么我的问题是，svelte 是否为该组件的每个实例分配事件处理程序在一个页面中，或一个委托给所有实例的事件处理程序中，传递 ref? question 对于任何组件都是通用的。

【问题讨论】：

标签： event-handling svelte

【解决方案1】：

Svelte 将您的事件处理程序分配给每个实例。

您可以通过查看编译器的输出来了解这一点。（见https://svelte.dev/repl中的“JS输出”标签）

例如：

<MyAnchor on:click={handleClick}/>
<MyAnchor on:click={handleClick}/>

将导致：

const myanchor0 = new MyAnchor();
myanchor0.$on("click", handleClick);

const myanchor1 = new MyAnchor();
myanchor1.$on("click", handleClick);

【讨论】：