如何将事件处理函数作为$$restProps传递给Svelte子组件

实现方案 #

你遇到的问题核心是Svelte中on:*格式的事件绑定默认不会进入$$restProps，可以用下面两种方案解决： #

方案1：用原生事件属性传参（最简便） #

直接把父组件里的on:keyup写法改成原生DOM事件属性的格式onkeyup，这个属性会自动进入$$restProps，你现有子组件的写法不需要改就可以直接生效：
父组件代码修改为：

<script lang="ts">
  const onKeyUp = (event) => {
    console.log(event)
  }
</script>

<main>
  <Input
    onkeyup={onKeyUp}
    className="input-todo"
    placeholder="What needs to be done ?"
  />
</main>

方案2：保留on:keyup写法，子组件加事件转发 #

如果你想要保留Svelte风格的on:keyup绑定写法，只需要在子组件的input元素上加一行on:*，即可自动转发所有父组件绑定的事件，不需要改动$$restProps相关逻辑：
子组件修改后的代码：

<script lang="ts"></script>

<div class="wrap-input">
  <input
    class='input'
    type="text"
    {...$$restProps}
    on:* <!-- 新增这行即可自动转发所有事件 -->
  />
</div>

<style lang="scss">
  // some styles
</style>

父组件的on:keyup={onKeyUp}写法不需要改动就能正常触发。

内容的提问来源于stack exchange，提问作者404it