在 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" 在所有输入之间共享而不必单独绑定每个输入，有什么想法吗？

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

或者做这样的事情（对我来说这似乎更接近 real-world 场景）：https://svelte.dev/repl/caee89041bc44575a8c6fd91b78ca2e6?version=3.4.1

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

Deconstruct "on:change" event in Svelte 3

javascript

svelte