Svelte - 从组件脚本转发事件

Question

我想知道如何使用 Svelte 从函数转发事件。

例如，我有一个App.svelte和一个Component.svelte文件。 Component.svelte是一个按钮组件。我想像这样处理on:click事件：

<script>
   function handle(e){ /** Do things */ -  /** Forward Event */ }
</script>

<button on:click={handle}/>

所以我也可以从App.svelte文件中获取事件

<script>
   import Button from './component.svelte'

   function handle(e){ /** Do something */ }
</script>

<div>
   <Button on:click={handle}/>
</div>

我知道您可以通过填充on:click属性而不指定要调用的函数来转发component.svelte文件内的事件。但就我而言，我需要在组件内部进行一些内部逻辑。或者我真的需要为此创建自定义事件处理程序吗？

感谢您的帮助 ：）

Answer 1

或者我真的需要为此创建自定义事件处理程序吗？

不，如果您只想监听单击，但希望在组件内部执行逻辑并将单击传递给父级，则不需要自定义事件。

Svelte 允许您添加任意数量的 on:click。因此，其中一个 on:clicks 可以为空，并将单击处理程序传递给父级，另一个可以处理组件的内部功能/逻辑。

<button on:click={internalFunction} on:click>Something</button>

这是一个显示它有效的REPL，当我需要了解的只是两个组件中的单击时，我通常使用它来避免 createEventDispatcher 的样板。当然，如果您需要单击在子级中执行某些操作，然后发生其他一些事情，那么父级会收到通知，那么您需要分派该事件，但这适用于您的示例。