Connecting components with custom events
Frameworks such as Vue.js allow us to break down our application into very small components, sometimes as small as a single HTML element. This would not be possible without a strong communication system.
Native HTML elements offer events as a way for them to trigger actions and pass information to their parents, and Vue.js components use a very similar pattern by offering custom events.
Custom events are not something new, as they have been around JavaScript for quite some time, but they are usually very verbose to use in vanilla JavaScript, whereas with Vue.js, creating, emitting, and listening to custom events feels easy and intuitive. Let’s see how these are defined and used.
To learn about custom events, we are going to modify the Companion App by adding the ability for the user to delete a post:
Figure 6.4: Diagram displaying the flow of data between parent and child components
As visualized...
