如何在Svelte中正确包装第三方组件
如何在Svelte中正确包装第三方组件
提问于 2022-09-15 11:01:02
我正在尝试包装第三方svelte组件，但我想不出正确和干净的方法来做到这一点。
Context：我使用的是一个设计系统(碳设计系统通过carbon-components-svelte)。我想用我自己的验证规则将它们的<TextInput>包装在一个自定义组件中，以便在我的整个应用程序中使用。
Problem：我不知道如何通过自定义组件从<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} />难道没有一种更干净的方式将每件事都以苗条的形式传给家长吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-15 11:53:47
您不应该重新分派事件，而不应该设置任何处理程序，例如：
<TextInput on:change on:input />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73729939
复制相关文章
相似问题
腾讯云开发者
