Svelte三层组件事件转发异常：最外层未接收事件

我有三层嵌套的Svelte组件，尝试将最内层组件的事件转发至最外层组件，但事件仅在中间组件触发，最外层始终无法接收到。

最内层组件：TreeNodeView.svelte #

<script lang="ts">
  import { createEventDispatcher } from "svelte";
  import TreeNode from "./TreeNode";
  import TreeView from "./TreeView.svelte";

  const dispatch = createEventDispatcher();

  function onWantsUpload() {
    console.log("TreeNodeView");
    dispatch("wantsUpload", treeNode.id);
  }

  export let treeNode: TreeNode;
</script>

<li>
  </span>
    <span class="upload"
          aria-label={`Upload new version: ${treeNode.text}`}
          role="button"
          on:click={onWantsUpload}
          on:keyup={onWantsUpload}>
      <Upload title={`Upload new version: ${treeNode.text}`} />
    </span>
</li>

中间组件初始代码：TreeView.svelte #

<script lang="ts">
  import TreeNode from "./TreeNode";
  import TreeNodeView from "./TreeNodeView.svelte";

  export let treeNodes: Array<TreeNode>;
</script>

<ul role="group">
    {#each treeNodes as treeNode ( treeNode.id )}
        <TreeNodeView
          {treeNode}
          on:wantsUpload />
    {/each}
</ul>

最外层组件：ProjectDetail.svelte #

<script lang="ts">
  import ProjectDetailModel from "../../../models/ProjectDetail";
  import TreeNode from "../treeView/TreeNode";
  import TreeView from "../treeView/TreeView.svelte";

  export let treeNodes: Array<TreeNode>;
  export let projectDetail: ProjectDetailModel;

  function onWantsUpload(e: CustomEvent<string>) {
    console.log("ProjectDetail");
  }
</script>

<TreeView
  {treeNodes}
  on:wantsUpload={onWantsUpload} />

第一次测试（中间组件未显式转发） #

点击最内层的Upload元素时，预期控制台输出：

TreeNodeView

ProjectDetail

但实际仅输出：

TreeNodeView

为排查问题，我修改了中间组件，显式处理并重新分发事件：

修改后的中间组件：TreeView.svelte #

<script lang="ts">
  import { createEventDispatcher } from "svelte";
  import TreeNode from "./TreeNode";
  import TreeNodeView from "./TreeNodeView.svelte";

  const dispatch = createEventDispatcher();

  export let treeNodes: Array<TreeNode>;

  function onWantsUpload(e: CustomEvent<string>) {
    console.log("TreeView");
    dispatch("wantsUpload", e.detail);
  }
</script>

<ul role="group">
    {#each treeNodes as treeNode ( treeNode.id )}
        <TreeNodeView
          {treeNode}
          on:wantsUpload={onWantsUpload} />
    {/each}
</ul>

第二次测试（中间组件显式转发） #

此时点击Upload元素，预期控制台输出：

TreeNodeView

TreeView

ProjectDetail

但实际仅输出：

TreeNodeView

TreeView

疑问 #

我遗漏了什么？为什么最外层组件无法接收事件，或者中间组件未正确分发事件？

内容的提问来源于stack exchange，提问作者awj