I have an app that simply hides content Hidden.svelte
:
<script> let shown = false; function show() { shown = true; }</script><svelte:options accessors={true}/>{#if shown}<slot/>{/if}
Parent App.svelte
:
<script> import Hidden from 'Hidden'; let child;</script><Hidden bind:this={child}> Content</Hidden><button on:click={() => child.shown = true}>Show</button>
So, child's shown
can be easily set due to <svelte:options accessors={true}/>
in parent
But, I want to use method show()
since it can not only set shown
value, but also perform some magic
Thx to Chrome's DevTools, I found that all components have an Array
with props and methods, that could be accessed via some .$$.ctx
, so Hidden's show()
method can be called like this:
<button on:click={() => child.$$.ctx[2]()}>Show</button>
But) You know) Is there is a legal way to do it?