从 child 发送事件到 Svelte 中的祖父母

Dispatch event from child to grandparent in Svelte

我的应用程序结构如下:

在 child 组件中,我想将数据传递给 Grandparent,具体取决于用户点击的结果。我尝试这样做,使用 Event Dispatcher。不幸的是,这失败了,因为似乎只能在 parent 和 child 之间进行通信。有办法实现吗?

这是我的(简化)代码:

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

您可以使用 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>