This chapter covers:
- Passing data into components using props
- Getting data out of components by binding to props
- Using slots to supply content to be rendered
- Dispatching events to notify parent elements
- Using context to pass data to descendant components
Components in non-trivial Svelte applications need to communicate with each other.
For example, suppose we have a component that allows a user to enter their mailing address. It can render inputs for street, city, state, and postal code. It also contains logic to verify that the postal code matches the city. Another component that displays a map may want to know when the data in our mailing address component has been changed so it can display the location of the new address.
There are many ways for Svelte components to communicate. Table 5.1 summarizes the available options. It uses the terms “parent,” “child,” “descendant,” and “ancestor” to refer to the relationships between components in the component hierarchy.
Parent components directly render child components in their HTML sections. Ancestor components can be one or more levels removed from their descendant components. For example, if a Bank component renders an Account component, which renders a Transaction component, the Bank component is an ancestor of the Transaction component, and the Transaction component is a descendant of the Bank component.