For nested Svlete components, where an Outer
contains several Inner
s, is it possible to create a dispatcher with createEventDispatcher
in Inner
that would communicate the instance that called the dispatcher?
Outer.svelte would look something like
<script lang="ts"> import Inner from "./Inner.svelte"; /* placeholder array of 0-10 elements, to make it clear the number of Inners * in this component is different depedning on some outside factors */ let dynamicContent = Array.from({length: Math.random() * 10}, () => "something"); // How is it possible to set this? let lastSelectedInner: Inner | null = null;</script>{#each dynamicContent as item}<Inner on:select={(event) => lastSelectedInner = event.detail} />{/each}
And Inner.svelte would look something like:
<script lang="ts> import { createEventDispatcher } from "svelte"; const dispatch = createEventDispatcher();</script><button on:click={() => dispatch("select", /* how do I forward the instance here? */)} ><p>Click me</p></button>
Note: I need the actual instance to be in a variable, and not an index. Also, I don't want to have an array of all Inner
s, just a single reference to a single component.