时间戳

首页 > 解决方案 > 在 Svelte 从孩子到祖父母的调度活动

javascript - 在 Svelte 从孩子到祖父母的调度活动

问题描述

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

在子组件中，我想将数据传递给祖父母，具体取决于用户单击的结果。我尝试这样做，使用Event Dispatcher。不幸的是，这失败了，因为似乎只能在父母和孩子之间进行交流。有没有办法做到这一点？

这是我的（简化的）代码：

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

标签： javascripteventsevent-handlingsvelte

解决方案

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>

推荐阅读