La estructura de mi aplicación es la siguiente:
En el componente secundario, quiero pasar datos al abuelo, según el resultado en el que haga clic el usuario. Intenté hacer esto, usando un Despachador de eventos . Desafortunadamente, esto falla, ya que parece que la comunicación solo es posible entre padres e hijos. ¿Hay alguna manera de lograr esto?
Este es mi código (simplificado):
// 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>Puede burbujear eventos usando on:<eventName> sin ningún controlador de eventos después:
// 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>