How to make 2 components that are on different slots on the same theme layout communicate with each other

Question

I have 1 lightning community page. In there is a theme layout component. It's just a basic layout wherein the upper 1/4 contains a logo banner and some anchor tags for navigation. Then the lower 3/4 of the layout contains the body. The body contains 1 component for my single page application. To summarize what I currently have:

Lightning community page
| -- Theme Layout
     | -- Upper portion of theme layout
     |    | -- c:banner
     |    | -- c:navbar
     | -- Lower portion of theme layout
          | -- c:spa

My problem now is, the c:navbar component works if it will be used for redirecting to other lightning community pages. But how will I make it send a message to the c:spa component so that c:spa can react accordingly?

One of the workarounds I made is to navigateToURL to the same page and just add parameters to the url every time a link in c:navbar is clicked, then i'll just let c:spa process the contents of the URL to know if there is something for it to do. However, doing this refreshes the page and loses the look and feel of a SPA. It also clutters the URL with unnecessary parameters.

Is there any way to send a message from one component to another if they are on separate slots inside a theme layout?

Answer 1

What you need here is an application event. Application events by definition states:

Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.

In your scenario, you will need to register an application event and fire it from c:navbar and handle that event in your c:spa component.

You can look for more details on communicating with events on the help documentation.