如何将事件处理程序作为 $$restProps 传递给子组件

Question

我有一个像这样的输入组件：

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

<div class="wrap-input">
  <input
    class='input'
    type="text"
    {...$$restProps}
  />
</div>

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

我在父级上使用了输入组件：

<script lang="ts">

  // function event handler
  const onKeyUp = (event) => {
    console.log(event)
  }
</script>

<main>
  <Input
    on:keyup={onKeyUp} // How I can send this event to input component as $$restProps
    className="input-todo"
    placeholder="What needs to be done ?"
  />
</main>

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

Answer 1

根据事件转发教程，
on:keyup没有值的事件指令意味着“转发所有 keyup 事件”，因此您可以将Input组件更改为：

<div class="wrap-input">
  <input
    class='input'
    type="text"
    on:keyup
    {...$$restProps}
  />
</div>

例子