如何在Svelte中优雅封装第三方组件并转发所有事件？

问题背景 #

我基于carbon-components-svelte的Carbon Design System开发，想要封装<TextInput>组件，添加自定义验证规则后在全应用复用。但遇到一个问题：无法简洁地将TextInput的所有事件转发给父组件。on:*指令虽能实现但官方不推荐；svelte-material-ui的forwardEvents.js方案基于use:指令，仅适用于DOM元素而非组件。目前只能逐个手动绑定事件处理函数，繁琐且缺乏灵活性，求优雅的实现方式。

当前封装组件代码（sanitizedField.svelte）：

<script>
  import { TextInput } from 'carbon-components-svelte'
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();

  export let value
  
  function thirdPartyForwarder(ev) {
    dispatch(ev.type, ev.detail)
  }

</script>

<TextInput {...$$props} bind:value 
on:event1={thirdPartyForwarder} 
on:event2={thirdPartyForwarder} // <==== 希望避免这种写法
on:event3={thirdPartyForwarder} .../>

使用示例（Page.svelte）：

<script>
    import SanitizedField from '$lib/components/sanitizedField/sanitizedField.svelte'
  
    let bindedValue
  
    function doSomething(ev) {
    //   ...do something
    }
  
  </script>
  
<SanitizedField bind:value={bindedValue} on:thirdPartyEvent1={doSomething} />

优雅实现方案 #

利用Svelte的动态事件指令和svelte:fragment，可以批量绑定并转发组件事件，无需逐个手动编写。步骤如下：

1. 整理出TextInput组件支持的所有事件（可从carbon-components-svelte官方文档获取，常见事件包括change、input、focus、blur、keydown、keyup等）。
2. 创建统一的事件处理函数，在函数中加入自定义验证逻辑，再转发事件到父组件。
3. 通过{#each}循环结合svelte:fragment动态绑定所有事件。

修改后的封装组件代码 #

<script>
  import { TextInput } from 'carbon-components-svelte';
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();
  export let value;

  // 列出需要转发的TextInput事件（根据实际需求补充）
  const forwardEvents = ['change', 'input', 'focus', 'blur', 'keydown', 'keyup', 'click'];

  function handleEvent(e) {
    // 这里加入你的自定义验证逻辑
    // 示例：验证输入不为空
    if (!value.trim()) {
      console.warn('输入不能为空');
      // 若验证不通过，可选择不转发事件或做其他处理
      // return;
    }

    // 验证通过后转发事件到父组件
    dispatch(e.type, e.detail);
  }
</script>

<TextInput {...$$props} bind:value>
  {#each forwardEvents as event}
    <svelte:fragment on:{event}={handleEvent} />
  {/each}
</TextInput>

父组件使用示例 #

父组件可以像直接使用TextInput一样监听所有转发的事件，无需额外处理：

<script>
  import SanitizedField from '$lib/components/sanitizedField/sanitizedField.svelte';
  
  let bindedValue;

  function handleInputChange(e) {
    console.log('输入变化:', e.detail);
  }

  function handleFocus(e) {
    console.log('输入框聚焦');
  }
</script>

<SanitizedField 
  bind:value={bindedValue} 
  on:change={handleInputChange}
  on:focus={handleFocus}
  placeholder="请输入内容"
/>

方案优势 #

• 仅需维护一个事件数组，无需逐个编写on:event指令，代码更简洁易维护。
• 自定义验证逻辑统一在handleEvent函数中处理，避免重复代码。
• 父组件使用方式与原生TextInput完全一致，学习成本低，复用性强。

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