Export Component Properties


Properties are the main data inputs for components, they can be used and manipulated in 4 ways:

1. Using the code editor and basic svelte data props

-- Parent Component --
<script>
  import ChildCmp from "./ChildCmp.svelte"
</script>
<ChildCmp name="Cmp Name" />

-- ChildCmp.svelte --
<script>
 export let name
</script>
<div>
 {name}
</div>

More information about props in svelte docs

2. Using stories, for testing and updating data

editor stories fouita


3. Using data propagation

Pass data to external child components added using drag and drop from the visual editor.
More details about data propagation in the coming sections.

4. Using events listener

You can change component behavior by updating its props from an event function.
More details about events in the following sections


Export functions


You can export functions as well and use it mostly with events


-- Cmp.svelte --
<script>
  let open = false
  export function toggle(){
    open = !open
  }
</script>

{#if open}
  <div> Text to show </div>
{/if}


-- Event function, called when clicking on external element in the page --
function(elms, props, evt) {
  // props takes the component exported properties in event functions
  props.toggle()
}