Six ways to share data between Svelte 3 components (Part-1)

We have a component that allows a user to enter their profile. It renders inputs for first name, last name, age, email, posts, and phone number. There is another component that displays a list of posts. It wants to know when the user creates a new post and then displays it on the web page.

Let's see in this post, how we can accomplish that.

There are six ways, Svelte components communicate with each other. It uses the parent-child relationship.

Props

Props allow components to receive input. Attributes on component elements specify their values. A component, for example, can be used as follows by a parent component.

Create a file PropsComponent.svelte and write the following code:

<script>
    export let message;
</script>

<div>
    <p>{message}</p>
</div>

<style>
  p {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}
</style>

The export keyword is to declare props in the <script> element of a component.
Because parent components might change the value, we use the let keyword instead of const to specify props.

And in App.svelte, write the following:

<script>
    import PropsComponent from './PropsComponent.svelte';
</script>

<main>
    <PropsComponent message="Communicating through Props..."/>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

If we set the value of the message props in the Component, it'll we changed by the parent component. If we set let message = 'some random string' in the PropsComponent it'll be over-written by the parent.

Following are the properties of the Props:

Props can be javascript expressions.
Props can be arrays.
Props can be objects
Props can be functions.

<script>
    // As boolean
    message = message ? true : false

	// Arrays
	message = { ['Success', 'Failure', 'Warnings'] }

	// Objects
	// *** Objects Needs an extra Pair of brackets *** //
	message = { { 1: 'Success', 2: 'Failure', 3: 'Warnings' } } 
    
    // Alternate way of showing the objects in Svelte. 
    // It is same as above. Not recommended but can also be defined as
    message = "{ { 1: 'Success', 2: 'Failure', 3: 'Warnings' } }"
    
    // As Functions
    message = { getMessageFunction }
    
</script>

Like React, Svelte doesn't have a way to specify the different types of props. It causes a runtime error if we pass the incorrect props to the component.
String or an integer instead of an object causes a runtime error. We can use prop-types to solve the above problem. Catching run-time error will be covered in a different article.

Slots

Components can accept elements in the form of child elements. A custom Profile component, for example, can have child components representing a first name, the last name, and an email address. It can then render all of these in an envelope's usual layout.

Components accept child components with the help of slots. The component controls how a slot renders.

<Profile>
    <div slot="first_name">Michael</div>
    <div slot="last_name">Foo</div>
    <div slot="email">michaelfoo@example.com</div>
</Profile>

However, the below state is also completely acceptable for Svelte slots

<slot> Slot without data </slot>

We'll discuss the other ways in our next article