svelte - 如何通过第三方 Svelte 组件转发事件？

Question

我有一个嵌套组件的层次结构(Svelte 3.35.0)，如下所示:

Component A
    Component B (third-party)
        Component C

组件 C 想要 dispatch使用 createEventDispatcher 的事件组件 A 正在监听。文档说:

If the on: directive is used without a value, the component will forward the event, meaning that a consumer of the component can listen for it.

问题是.. 默认行为将事件转发限制为“子 -> 父”，我无权访问组件 B 的代码(它是一个单独的库)。根据规则，我需要在定义的层次结构上“转发”该事件，即从 B 到 A。
因此，如果我想正确地将事件从组件 C“冒泡”到在组件 A 中定义的处理程序，我需要构建以下逻辑:

Component A have an implementation for the "onMyEventHandler" function and
it doesn't know anything about Component C (it shouldn't, for decoupling purposes).

Component A ---------------------- on:my-event={onMyEventHandler}
    Component B ------------------ on:my-event    <-- just to forward up to the parent's parent
        Component C -------------- dispatch('my-event')

问题是 - 如何使用 on:eventname 正确地将事件从组件 C 传递到组件 A指示？我看过一个 bubble生命周期代码( https://github.com/sveltejs/svelte/blob/v3.35.0/src/runtime/internal/lifecycle.ts#L64 )中的方法，但我不明白如何正确利用该逻辑。还是有更方便的方法？
更新:还有像 $$props 这样的“魔法” Prop 和 $$restProps ，用于通过元素属性转发组件属性的值，但对于 on: 没有类似的“技巧” - 类似的指令。
更新 2:所以，我应该提供一个示例(另外，此时我正在考虑使用 writable 存储和上下文)。
我正在使用 svelte-routing库和我的代码如下所示:
./Application.svelte <--- 组件 A

<Menu items={menuItems} />

...

<Router>
    {#each menuItems as menuItem}
        {#if menuItem.component !== MenuDivider}
            <Route    <--- Component B
                path={menuItem.path}
                component={menuItem.component}    <--- Component C
                on:app.event.page.shown={onPageShown}
            />
        {/if}
    {/each}
</Router>

./Navigation/Menu.svelte

<Router>
    <ul class="menu">
        {#each items as item}
            {#if item.component === MenuDivider}
                <MenuDivider label={item.title} />
            {:else}
                {#if item.url?.length > 0}
                <li class="menu-item">
                    <Link to={item.url} getProps={onLinkUpdate}>
                    {item.title}
                    </Link>
                </li>
                {/if}
            {/if}
        {/each}
    </ul>
</Router>

./Page/AboutPage.svelte

<div> page contents... </div>

Route是来自外部库的“第三方”组件，它提供 API 来定义不同“虚拟”页面之间的客户端路由(即页面组件，参见行 component={menuItem.component})。该页面有 onMount使用一些业务逻辑来通知主要应用程序组件不同的状态变化(例如标题附加)。因此它会发出事件，并且顶级应用程序组件将 try catch 它们(并且它不知道我们有多少页面及其名称)。 Route来自 svelte-routing具有以下签名:

{#if $activeRoute !== null && $activeRoute.route === route}
  {#if component !== null}
    <svelte:component this="{component}" location={$location} {...routeParams} {...routeProps} />
  {:else}
    <slot params="{routeParams}" location={$location}></slot>
  {/if}
{/if}

如果我转发 on:onMyEventHandler对它的指令是这样的:

<svelte:component this="{component}" location={$location} {...routeParams} {...routeProps} on:onMyEventHandler />

它将使用以下路径传播事件: AboutPage (project-level) -> Route (library) -> Application (project-level) .但是，显然，我无法做到这一点(并且没有 "$$restDirectives"/"$$forwardMePlease"技巧可以做到这一点)。
我认为这只是一种糟糕的做事方式，认为“事件”概念是一个全局性的东西(来自 java/php 样式的事件调度程序)。

Answer 1

这似乎不是很简单，但我找到了两种解决方法，都涉及 ContextApi。
(请注意，在下面的代码中删除了很多内容，例如导入组件)
使用包装组件
第一种也是最简洁的方法是构建一个中间组件，该组件将捕获事件并将它们分派(dispatch)给父级。

<!-- Parent -->
<EventHandler on:click="{() => console.log('click')}">
  <ThirdParty component={MyComponent} />
</EventHandler>

<!-- EventHandler -->
<script>
    import { createEventDispatcher, onMount, setContext } from 'svelte'
    setContext('context-dispatch', createEventDispatcher())
</script>
<slot />

<!-- MyComponent -->
<script>
    import { getContext } from 'svelte' 
    const dispatch = getContext('context-dispatch') 
    const handleClick = ev => dispatch('click', ev)
</script>
<button on:click={handleClick}>Click here</button>

给自己添加回调
第二种方法有点脏，需要深入研究 Svelte 的一些内部工作原理，这些都没有记录，因此将来可能会改变(尽管不太可能)。它以某种方式涉及从自身内部向父组件添加事件回调。

<script>
    import { createEventDispatcher, setContext } from 'svelte'
    import { get_current_component } from 'svelte/internal'

    const dispatch = createEventDispatcher()
    setContext('context-dispatch', dispatch)
    get_current_component().$$.callbacks['click'] = [
        () => console.log('callback')
    ] 
</script>
<ThirdParty component={MyComponent} />

我会说实话，我什至不知道第二种方法是可能的，我会 强烈反对 ，认为它更像是一种学术思想......