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

【问题标题】：How I can pass my event handler as $$restProps to child component如何将我的事件处理程序作为 $$restProps 传递给子组件
【发布时间】：2021-12-30 17:19:03
【问题描述】：

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

<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>

【问题讨论】：

标签： svelte svelte-3

【解决方案1】：

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

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

Example

【讨论】：

是的，这个解决方案可以帮助我！但我认为最好有办法将偶数处理程序作为 $restProps 发送，等待 Svelte 的新功能。