在 Svelte 中将事件从孩子发送给祖父母

Question

我的应用程序的结构如下：

• 祖父母是一种形式
• Parent 是调用 api 的输入
• Child 显示 api 调用的结果

在子组件中，我想将数据传递给祖父母，具体取决于用户单击的结果。我尝试使用“事件调度程序”来执行此操作。不幸的是，这失败了，因为似乎沟通只能在父母和孩子之间进行。有办法实现吗？ 这是我的（简化的）代码：

// Grandparent
  <form on:submit|preventDefault={handleSubmit}>
    <Search bind:item={item} on:result={e => console.log(e)} />
  </form>

// Parent
   <div class="search-results">
      <Response data={res} />
   </div>

// Child
  <script>
    function returnData(data) {
      dispatch("result", data);
    }
  </script>

  <button on:click={() => returnData(data)}>Click</button>

Answer 1

on:<eventName>

来冒泡事件，之后无需任何事件处理程序：

// Grandparent
  <form on:submit|preventDefault={handleSubmit}>
    <Search bind:item={item} on:result={e => console.log(e)} />
  </form>

// Parent
   <div class="search-results">
      <!-- only this line changes in your code:
           bubble the result event -->
      <Response data={res} on:result />
   </div>

// Child
  <script>
    function returnData(data) {
      dispatch("result", data);
    }
  </script>

  <button on:click={() => returnData(data)}>Click</button>

在 Svelte 5 中，改用回调 props，并将它们传递下去（例如，为 Parent 和 Child 创建一个 

onresult

prop）：

// Grandparent
  <form onsubmit={handleSubmit}>
    <Search bind:item={item} onresult={e => console.log(e)} />
  </form>

// Parent
   <script>
     let { item = $bindable(), onresult } = $props();
   </script>

   <div class="search-results">
      <Response data={res} {onresult} />
   </div>

// Child
  <script>
    let { onresult } = $props();
  </script>

  <button onclick={() => onresult(data)}>Click</button>