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...