Data Propagation


Data propagation is useful if we like to separate the components requesting data from the server and the ones that are responsible for displaying it.

To make child component access data from a parent component we usually use syntax like the following:

<script>
 import Child from "child.svelte"
 let data = {name: 'exp'}
</script>

<div>
 <!-- code -->
 <div>
  <Child prop={data} />
 </div>
 <!-- code -->
</div>

But since we're using a visual editor to drag and drop components we don't know which component(s) will be in the data area.

To pass data we can use a stringified version of the data

<script>
 let data = {name: 'exp'}
</script>

<div>
 <!-- code -->
 <div data-props={JSON.stringify({customProp: data})}>
   <!-- Any child goes here will get customProp property data -->
 </div>
 <!-- code -->
</div>

Child looks something like this

<script>
 export let customProp
</script>
....