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.