Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

svelte

How to do component communication in Svelte

Yasir Latif

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

Svelte is an application that consists of one or more reactive components. A block of code written in a .svelte file encapsulates CSS, HTML, and JavaScript as reusable components. These components communicate with each other to parse data from parent components to child components. This component communication is possible using Svelte.

Types of component communication

Svelte provides powerful ways for component communication. These are as follows:

  1. Props (properties)
  2. Slots
  3. Events
  4. Context API
  5. Module context
  6. Stores

Props

In reactive component-based web applications, we must pass data from one component to its children. We achieve this by declaring properties shortened to props using the export and import keywords.

Props for component communication

Slots

When passing data from parent components to child components, it is possible that the data is meant to render for a specific child, and not for all. For multiple children, we use the slot to render data to a specific position or child. We use this as a <slot> HTML tag in the child component.

Slots for component communication

Events

Passing data from the child in form of events is another interesting part of component design. We dispatch the user events by importing createEventDispatcher from Svelte. When an event function occurs on the child, the data is sent. This includes the triggered event name.

dispatch(<eventName>, <data>) from createEventDispatcher

Events for component communication

Context API

Moving towards advanced communication techniques, the context API provides a powerful mechanism for communication with the child components. It does this without dispatching events or passing data objects as props. We require a parent or top-level component to use setContext() to set the data, and the child components to use getContext() to retrieve the data.

Context API for component communication

Module context

The simplest way of component communication in Svelte is to use the module context. It is as easy as adding a variable in the script tag as context=module. The user data is sent as props from app.svelte. The illustration below shows how it occurs.

Module context for component communication

Stores

During application development, we don't need to embed a lot of data and features as the application grows. Adding more features requires adding more components that increase the complexity of the application. The Svelte stores are useful in such scenarios. They are built-in Svelte stores that enable developers to get out of the component's hierarchy and complexity. A Svelte store can hold an array of objects, or even a single object, with different permissions to users, like readable, writable, custom, and derived.

Stores for component communication

RELATED TAGS

svelte

CONTRIBUTOR

Yasir Latif
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring