It is very common to come across use case of communicating between Lightning Web Components.
If you are not interested on code explanation and directly want to jump on live demo , check this playground.
Communicate between Nested Lightning Web Components
In above image, Model 3 is child (nested component) of Tesla.
In above, Model 3 component, custom event modelclick is raised using class CustomEvent.
Lets, see how Parent Component Tesla is defined.
That concludes, how communication happens between Parent child Lightning Web Components.
Lightning Web Component Event handling – Pub Sub Library
In above image, if we want Tesla event to be handled by Honda Component, traditional bubble based event handling will not work.
Note, how pubsub js is imported on line 2 of Vehicle.js. On line 7, we are firing event using pub-sub library.
Lets create a Lightning Web Component which will handle event generated by pub sub library.
As seen in above code, register method is used to handle event. Also note, how unique event identifier is used to fire and register event.
Feel free to comment and share your feedback. Happy coding !!!