将on:click事件传递到动态创建的< svelte:component/> [英] Passing on:click event into dynamically created <svelte:component/>

问题描述

我基本上需要能够触发一个或多个组件( 通过svelte:component动态添加)时，父级中的图标/按钮 单击组件.例如我需要钩住下面用**表示的部分:-

I basically need to be able to trigger something within one or more components (that are being dynamically added via svelte:component) when an icon/button within the parent component is clicked. e.g. I need to hook the parts denoted with ** below:-

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

我能够通过取消一系列道具来使某些东西起作用，但是每个道具 数组更改时会通知组件，因此这不是很干净.

I was able to get something working by unsing an array of props but each component is notified when the array changes so this is not very clean.

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

I have searched both Google and StackOverflow as well as asking this question within the Svelte Discord channel with currently no luck.

显示问题的Svelte Repl

这似乎是一个简单的要求，但是过了几天，我仍然坚持不懈，因此非常感谢有关如何将事件传递到动态组件中的任何建议.

This seems like such a simple requirement but after a couple of days I remain stuck so any advice on how to pass events into dynamic components is much appreciated.

推荐答案

您可以做到像这样:

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

将事件作为数据传递虽然有点不寻常.响应事件的发生，在父组件中设置一些状态，然后将该状态传递给下层对象，这将是更加习惯的做法.

Passing events around as data would be a bit unusual though. It would be more idiomatic to set some state in the parent component in response to the event, and pass that state down.

或者，如果子组件是 do 需要自己响应事件，您可以采用这种方法...

Alternatively, if the child components do need to respond to events themselves you could take this approach...

<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方法:

...where each child component exports a handle method:

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

这篇关于将on:click事件传递到动态创建的< svelte:component/>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！