如何在Svelte自定义按钮组件内部访问传入的on:click事件处理器

嘿，这个需求我之前刚好实现过，在Svelte里完全可以优雅搞定，不用搞自定义属性那一套！给你两种实用的方案，看你偏好哪种：

方法一：利用事件调度器（推荐） #

这种方式最贴合Svelte的事件系统设计，完全保留外部组件的调用方式，同时在内部插入包装逻辑：

修改你的Button.svelte组件：

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

  function handleClick(event) {
    // 这里写你要添加的内部逻辑，比如日志、状态更新、防抖节流之类的
    console.log("组件内部先执行包装操作");
    
    // 触发外部绑定的click事件处理器，还能把原生事件对象传过去
    dispatch('click', event);
  }
</script>

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

外部使用方式完全不需要改变，还是你原来的写法：

<Button on:click={doStuff}>click me</Button>

原理很简单：内部的handleClick先执行你的自定义逻辑，再通过createEventDispatcher触发组件的click事件，外部绑定的doStuff就会被正常调用，完美实现包装效果。

方法二：直接接收事件处理器属性 #

如果你需要更直接地掌控外部处理器的调用逻辑（比如条件触发、修改参数），可以用这种方式：

修改Button.svelte：

<script>
  // Svelte会自动把外部的on:click映射为onClick属性（驼峰转换）
  export let onClick;

  function wrappedClick(event) {
    // 内部包装逻辑
    console.log("执行内部自定义操作");
    
    // 调用外部处理器前先判断是否存在，避免报错
    if (onClick) {
      onClick(event);
      // 你甚至可以修改参数，比如 onClick({...event, customData: 'xxx'})
    }
  }
</script>

<button on:click={wrappedClick}>
  <slot />
</button>

外部使用依然保持原样：

<Button on:click={doStuff}>click me</Button>

这种方式让你能直接拿到外部的doStuff函数，灵活度更高，适合需要对处理器做复杂定制的场景。

个人更推荐第一种方案，因为它更符合Svelte的设计理念，代码更简洁，也不需要额外声明属性~

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