Defining Svelte context
When you need to pass data from a parent component to a child component, the first thing you should think of is using props:
<Component props={value} /> What if you need to pass data from a parent component to a grandchild component? You could pass data as props from the parent component to the child component, and then from the child component to the grandchild component:
<!-- Parent.svelte -->
<Child props={value} />
<!-- Child.svelte -->
<script>
export let props;
</script>
<GrandChild props={props} /> What if you need to pass data from a parent component to a great-grandchild component?
You could follow a process similar to what we did in the preceding code, passing the data through layers of components to reach the great-grandchild component.
This approach is called prop drilling. It is akin to drilling a hole through layers of components via props. This is frowned upon in most cases...