首頁猿問將 on:click...

將 on:click 事件傳遞給動態創建的 <svelte:component/>

JavaScript

智慧大石 2021-10-29 16:12:08

當單擊父組件中的圖標/按鈕時，我基本上需要能夠在一個或多個組件（通過 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}我能夠通過 unsing 一組 props 來獲得一些工作，但是當數組更改時每個組件都會收到通知，所以這不是很干凈。我已經搜索了 Google 和 StackOverflow 并在 Svelte Discord 頻道中詢問了這個問題，但目前沒有運氣。這似乎是一個如此簡單的要求，但幾天后我仍然卡住了，因此非常感謝有關如何將事件傳遞到動態組件的任何建議。

查看完整描述

1 回答

泛舟湖上清波郎朗

TA貢獻1818條經驗獲得超3個贊

你可以做這樣的：

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="icon" on:click={e=>events[i] = e}>Click</div>

<svelte:component this={charts[i]} event={events[i]}/>

</div>

{/each}

不過，將事件作為數據傳遞會有點不尋常。更習慣的做法是在父組件中設置一些狀態以響應事件，并將該狀態向下傳遞。

或者，如果子組件確實需要自己響應事件，您可以采用這種方法......

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="icon" on:click={e => instances[i].handle(e)}>Click</div>

<svelte:component

this={charts[i]}

bind:this={instances[i]}

</div>

{/each}

...其中每個子組件導出一個handle方法：

let event;

export function handle(e){

event = e;

};

</script>

反對回復 2021-10-29

1 回答
0 關注
161 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將 on:click 事件傳遞給動態創建的 <svelte:component/>

將 on:click 事件傳遞給動態創建的 <svelte:component/>

1 回答

添加回答