javascript - 如何在 Svelte 中正确包装第三方组件

Question

我正在尝试包装第三方精简组件，但我无法找到正确且干净的方法来执行此操作。

上下文:我正在使用一个设计系统(碳设计系统通过 carbon-components-svelte )。我想包装他们的<TextInput>在具有我自己的验证规则的自定义组件中，以便在整个应用程序中使用。

问题:我不知道如何转发来自 <TextInput> 的所有事件通过我的自定义组件。

https://github.com/sveltejs/svelte/issues/2837谈论on:*指令很好，但经过一些研究，Svelte 开发者似乎并不真正喜欢这个想法。

https://github.com/hperrin/svelte-material-ui/blob/273ded17c978ece3dd87f32a58dd9839e5c61325/components/forwardEvents.js可能是一个解决方案，但它通过 use: 使用简洁的操作指令，但它不适用于组件，仅适用于 DOM 元素。

那么正确的做法是什么？我应该用 on:possibleEvent={event => dispatch(event)} 一一添加我的处理程序吗？ ？这看起来真的很重，特别是对于文本输入来说，而且根本不是动态的。

代码:

这是我的包装组件: 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} // <==== this I would like to avoid
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 中是否有一种更简洁的方法将每个事件转发给父级？

Answer 1

您不应该重新调度事件，而是不设置处理程序，例如:

<TextInput on:change on:input />