I need to pass data from the parent ponent to all child ponents, maybe some 3-4 levels down the chain. Using events for this is not a very elegant solution.

Is there a way to define a global variable that would be accessible to all child ponents of the ponent?

I would rather not use params either, since there will be a lot of repetition.

I need to pass data from the parent ponent to all child ponents, maybe some 3-4 levels down the chain. Using events for this is not a very elegant solution.

Is there a way to define a global variable that would be accessible to all child ponents of the ponent?

I would rather not use params either, since there will be a lot of repetition.

• javascript
• svelte

• You should have a look to the svelte-store. It allow you to share reactive variables across multiple ponents. See an example here. – johannchopin Commented Sep 23, 2020 at 8:04
• If I understood Svelte stores correctly - this won't work here. The data I want to pass is an instance of a custom store wrapper class that uses Svelte stores. The problem here is I will have many instances of the same ponent, so I need to make the child ponents aware of either the instance id or the class instance itself (ideal). I can pass the id via props, but it doesn't look nice when I have to do it in every ponent down the chain - though I will have to settle for that if there is no other way. – Maciej Kravchyk Commented Sep 23, 2020 at 8:13
• I guess there is a more elegant way to do this. The issue is I don't really know what you try to attempt. Maybe if you provide an workcase or example it will be easier to find a better logic :) – johannchopin Commented Sep 23, 2020 at 8:19
• 1 The exact work case would be a topic for a different question, but I will try to provide a simple example ;) Let's say you have a ponent like <Window/>. Now there can be many windows and each has its own unique id. The <Window/> has sub-ponents and these sub-ponents have to be aware of that id. It is possible to do with params, although the child ponents go a few levels down, so I was wondering if there is a way to define a global variable that would be automatically accessible to all children down the chain. – Maciej Kravchyk Commented Sep 23, 2020 at 8:41
• 1 Yes, but then that store has to be passed down to child ponents. Again, it can be passed by props, but it's not very elegant and it adds a lot of repetition to a plex app. – Maciej Kravchyk Commented Sep 23, 2020 at 10:00

2 Answers 2

It is for this exact problem that the ContextAPI is included in Svelte

in your 'parent' you do

import { setContext } from 'svelte'

setContext('my-var', variable)

and in any of the children where you need it you can do:

import { getContext } from 'svelte'

const variable = getContext('my-var')

This technique makes the my-var variable in all of the descendants.

Note that this variables is not reactive, if you need that you have to pass in a store instead of a regular variable.

Here it is in the docs

You can use <script context="module">

A <script> tag with a context="module" attribute runs once when the module first evaluates, rather than for each ponent instance. Values declared in this block are accessible from a regular <script> (and the ponent markup) but not vice versa.

https://svelte.dev/docs#script_context_module