Передача: нажмите событие в динамически создаваемое - PullRequest
Новая
       21

Передача: нажмите событие в динамически создаваемое

0 голосов
/ 26 сентября 2019

Мне нужно иметь возможность запускать что-то внутри одного или нескольких компонентов (которые динамически добавляются через 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}

Я смог заставить что-то работать, используя массив реквизитов, но каждый компонент уведомляется, когда массив изменяется, так что это не оченьclean.

Я выполнил поиск в Google и StackOverflow, а также задал этот вопрос в канале Svelte Discord, но пока безуспешно.

Svelte Repl, показывающий проблему

Это кажется таким простым требованием, но через пару дней я застрял, поэтому любые советы о том, как передавать события в динамические компоненты, очень ценятся.

1 Ответ

1 голос
/ 26 сентября 2019

Вы можете сделать это вот так : 

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

Передача событий как данных будет немного необычной.Было бы более идиоматично устанавливать какое-то состояние в родительском компоненте в ответ на событие и передавать это состояние вниз.

В качестве альтернативы , если дочерние компоненты 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: 

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