将：click 事件传递到动态创建的 中

我基本上需要能够触发一个或多个组件中的某些内容（即 当父级中的图标/按钮时通过 svelte:component 动态添加 单击组件。例如我需要挂钩下面用**表示的部分：-

<script>
 let charts = [
    ChartA,
    ChartB,
    ChartC
  ];
</script>
{#each charts as chart, i}
    <div class="wrapper">
        <div class="icon" on:click={**HowToPassClickEventToComponent**}></div>
        <div class="content">
        <svelte:component this={charts[i]} {**clickedEvent**}/>
        </div>
    </div>
{/each}

我能够通过使用一系列道具来完成一些工作，但是每个道具 当数组更改时组件会收到通知，因此这不是很干净。

我已经搜索了 Google 和 StackOverflow，并在 Svelte Discord 频道中提出了这个问题，但目前没有运气。

Svelte Repl 显示问题 https://svelte.dev/repl/fc91e089278848eba782f9ef994f534e?version=3.12.1

这似乎是一个简单的要求，但几天后我仍然陷入困境，因此非常感谢任何有关如何将事件传递到动态组件的建议。

你可以做到这一点像这样 https://svelte.dev/repl/f94bc4f69d2b4629ba4f5052c727b847?version=3.12.1:

<script>
    import ChartA from './ChartA.svelte'
    import ChartB from './ChartB.svelte'
    import ChartC from './ChartC.svelte'
    let charts = [
        ChartA,
        ChartB,
        ChartC
    ];
    let events = [];
</script>

<style>
    .icon{
        width:60px;
        height:30px;
        background-color:grey;
    }
</style>

{#each charts as chart, i}
    <div class="wrapper">
        <div class="icon" on:click={e=>events[i] = e}>Click</div>
        <div class="content">
            <svelte:component this={charts[i]} event={events[i]}/>
        </div>
    </div>
{/each}

不过，将事件作为数据传递有点不寻常。在父组件中设置某些状态以响应事件并将该状态向下传递会更惯用。

或者 https://svelte.dev/repl/8b97f00e55be46daae9db8db5f0cf973?version=3.12.1，如果子组件do需要对事件本身做出反应，你可以采取这种方法......

<script>
    import ChartA from './ChartA.svelte'
    import ChartB from './ChartB.svelte'
    import ChartC from './ChartC.svelte'
    let charts = [
        ChartA,
        ChartB,
        ChartC
    ];
    let instances = []; 
</script>

<style>
    .icon{
        width:60px;
        height:30px;
        background-color:grey;
    }
</style>

{#each charts as chart, i}
    <div class="wrapper">
        <div class="icon" on:click={e => instances[i].handle(e)}>Click</div>
        <div class="content">
            <svelte:component
                this={charts[i]}
                bind:this={instances[i]}
            />
        </div>
    </div>
{/each}

...其中每个子组件导出一个handle method:

<script>
    let event;
    export function handle(e){
        event = e;
    };
</script>