Svelte - 从组件脚本转发事件

Posted 2023-03-07

【中文标题】Svelte - 从组件脚本转发事件

【英文标题】：Svelte - Forwarding event from component scripting

【发布时间】：2021-01-25 07:45:12

【问题描述】：

我想知道如何使用 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>

我知道你可以在 component.svelte 文件中转发事件，只需填写一个 on:click 属性而不指定要调用的函数。但就我而言，我需要在组件内部进行一些内部逻辑。还是我真的需要为此创建自定义事件处理程序？

感谢您的帮助:)

【参考方案1】：

我不确定我是否理解正确。您可以在您的函数中处理您的自定义逻辑，然后直接发送 click 转发。

在您的组件中：

<script>
  import  createEventDispatcher  from 'svelte'
  const dispatch = createEventDispatcher()
  function handle(e)
    console.log(”comp”)
    dispatch('click', e)
  
</script>
<button on:click=handle>test</button>

【讨论】：

我明白了，我可以自动转发未处理的事件吗？我希望能够从我的 App.svelte 文件中获取任何事件，而无需在我的 component.svelte 文件中写入：click、on:mouseenter、on:mouseleave 等...

【参考方案2】：

您正在寻找的是createEventDispatcher，它允许您“手动”触发事件。所以你要做的是：

import  createEventDispatcher  from 'svelte';
const dispatch = createEventDispatcher();

function handle(e) 
 // do stuff
 dispatch('my-event', data);

现在您可以使用on:my-event 收听此事件（注意这很可能是 on:click 或其他），传递给此事件的data 可以作为ev.detail 访问

【讨论】：

我明白了，我可以自动转发未处理的事件吗？我希望能够从我的 App.svelte 文件中获取任何事件，而无需在我的 component.svelte 文件中写入：click、on:mouseenter、on:mouseleave 等...

不，目前不可能

【参考方案3】：

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

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

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

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

这是一个REPL 表明它可以工作，我通常使用它来避免 createEventDispatcher 的样板，而我只需要知道两个组件中的点击。当然，如果您需要单击以在子级中执行某些操作，然后发生其他一些事情，则父级会收到通知，然后您需要调度该事件，但这适用于您的示例。