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>

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

感谢您的帮助:)

Answer 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>

Answer 2

您正在寻找的是 createEventDispatcher 它允许您 'manually' 触发事件。所以你会做的是：

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

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

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

Answer 3

Or do I really need to create custom event handler for that ?

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

Svelte 允许您添加任意数量的 on:click。因此，其中一个 on:click 可以为空，并将点击处理程序传递给 parent，另一个可以处理组件的内部 function/logic。

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

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

Svelte - 从组件脚本转发事件

Svelte - Forwarding event from component scripting

svelte-3

svelte-component