The structure of my application is as follows:
In the child component I want to pass data up to the Grandparent, depending on which result the user clicks on. I tried doing this, using an Event Dispatcher. This unfortunately fails, as it seems that communication is only possible between parent and child. Is there a way to accomplish this?
This here is my (simplified) code:
// Grandparent
<form on:submit|preventDefault={handleSubmit}>
<Search bind:item={item} on:result={e => console.log(e)} />
</form>
// Parent
<div class="search-results">
<Response data={res} />
</div>
// Child
<script>
function returnData(data) {
dispatch("result", data);
}
</script>
<button on:click={() => returnData(data)}>Click</button>
You can bubble events by using on:<eventName> without any event handler afterwards:
// Grandparent
<form on:submit|preventDefault={handleSubmit}>
<Search bind:item={item} on:result={e => console.log(e)} />
</form>
// Parent
<div class="search-results">
<!-- only this line changes in your code:
bubble the result event -->
<Response data={res} on:result />
</div>
// Child
<script>
function returnData(data) {
dispatch("result", data);
}
</script>
<button on:click={() => returnData(data)}>Click</button>