Svelte：如何将 `on:` 事件传递给子组件

Question

我想创建一个可以处理on:click但不导出handleClick函数的组件；这就是现在的运作方式

button.svelte：

<script lang="ts">
  export let handleClick: ((e: MouseEvent) => void ) | undefined = undefined
</script>
<button on:click={handleClick}>
  <slot></slot>
</button>

app.svelte：

<script lang="ts">
  import Button from '$lib/button/button.svelte'
</script>
<Button handleClick={() => console.log('click!')}>
  Click me!
</button>

如何更改 Button 元素以on:click直接在应用程序组件中使用？

app.svelte：

<Button on:click={handleClick}>
  <slot></slot>
</Button>

Answer 1

根据Svelte 文档：

\n

\n

如果在on:没有值的情况下使用指令，组件将转发事件，这意味着组件的使用者可以侦听该事件。

\n

\n

所以你应该能够在以下位置执行此操作button.svelte：

\n

<button on:click>\n  <slot></slot>\n</button>\n

\n

然后这应该适用于app.svelte：

\n

<script>\nimport Button from \'./button.svelte\';\n\nconst handleClick = (event) => {\n  // \xe2\x80\xa6\n};\n</script>\n\n<Button on:click={handleClick}>\n  Foo\n</Button>\n

\n