Svelte技术问题：如何无需导出函数让父组件直接绑定on:click到子组件

直接修改button.svelte，移除导出的handleClick变量，并利用Svelte的事件转发特性，就能实现父组件直接通过on:click绑定事件的需求：

修改后的button.svelte代码：

<script lang="ts">
  <!-- 移除原有的handleClick导出代码 -->
</script>
<button on:click>
  <slot></slot>
</button>

原理说明 #

在Svelte中，当组件内部的DOM元素使用on:event（这里是on:click）但不指定具体处理函数时，该事件会自动转发到组件实例本身。父组件就可以像操作原生DOM元素一样，直接通过on:click为组件绑定事件处理函数。

此时app.svelte可按期望方式使用：

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

内容的提问来源于stack exchange，提问作者Umer