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

Question

我正在尝试包装第三方svelte组件，但我无法找到正确而干净的方法。

上下文：我使用的是一个设计系统(通过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:指令使用了svelte操作，但它在组件上不可用，只在DOM元素上可用。

那么，正确的方法是什么呢？我应该使用on:possibleEvent={event => dispatch(event)}逐个添加我的处理程序吗？这看起来真的很重，尤其是对于textInput，而且一点也不动态。

代码：

这是我的包装组件：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} />

有没有一种更干净的方式把每一件事都转发给苗条的父母？

Answer 1

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

<TextInput on:change on:input />