javascript - 在 Svelte 3 中解构 "on:change"事件

Question

我有多个 input 元素，我可以将对象解构到这样的元素上。

<script>
    const settings = { value: '', class: 'input'};
</script>
<input {...settings} />
<input {...settings} />
<input {...settings} />

效果很好，我很满意。但我还想添加一个像这样的共享 on:change 事件。

<script>
    const settings = { value: '', class: 'input', "on:change": () => {}};
</script>
<input {...settings} />
<input {...settings} />
<input {...settings} />

关于如何让“on:change”在所有输入之间共享，而不必单独绑定(bind)每个输入，有什么想法吗？

Answer 1

你可以这样做:https://svelte.dev/repl/96452415187144eeb1ab3a70be23b535?version=3.4.1

但是使用 onchange 而不是 on:change 确实会带来一些缺点，例如无法使用修饰符(on:change|preventDefault、on:change|once 等)。

您还可以将输入包装在如下组件中: https://svelte.dev/repl/2ea820dd4a0b4fedbb7642bd8c1710d2?version=3.4.1

或者做这样的事情(对我来说这似乎更接近现实世界的场景):https://svelte.dev/repl/caee89041bc44575a8c6fd91b78ca2e6?version=3.4.1