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”在所有输入中共享而不用单独绑定每个输入的任何想法？

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

在Svelte 3中解构“ on：change”事件

1 个答案: