Menu
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 are legal way to do it?
875
One way to call a child component's function from its parent is with the help of the useRef hook. Here's the gist of it: We pass a Ref (e.g. childFunc ) to a child 🧒 component and assign the desired function to the Ref's current key. This then gives you access to that very function in the parent component.
Passing functions to props Let's register a new prop called handleClick which helps us to pass the event handler function as a prop from the parent component. Now we are passing the function to the handleClick prop. In the above code, we have created three functions and passed it to the handleClick prop.
Passing child elements in @sveltejs is pretty easy. But it has some rules. To pass elements down to a Svelte component you must use the <slot> element. Look at the code below. Pretty easy so far! I like to tweet about Svelte and post helpful code snippets.
Svelte application is composed of one or more components. A component is a reusable self-contained block of code that encapsulates HTML, CSS, and JavaScript that belong together written into a .svelte file. Designing the user interface with components the main challenge will be, managing the application state on different components.
In some very rare cases, you may need to call a child component’s method directly from a parent component. Generally speaking, this should be seen as only a last resort. Component communication in most cases should be limited to data binding (Both input and output), and and in some cases using a service to emit values between two components.
It's possible to pass methods down to child components, but it's a little awkward. A more idiomatic approach is to fire an event from the child component and listen for that event from the parent component:
Hidden.svelte
<script>
let shown = false;
export function show() {
shown = true;
}
</script>
{#if shown}
<slot/>
{/if}
App.svelte
<script>
import Hidden from './Hidden.svelte';
let child;
</script>
<Hidden bind:this={child}>
Content
</Hidden>
<button on:click={() => child.show()}>Show</button>
The call to child.show() can actually be simplified, but I thought this could make it harder to figure out what's going on in the example. You can do just:
<button on:click={child.show}>Show</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
