Loosely Coupled Components

Abstract

As a Vue.js application grows, the need to pass data and events between parent and child components becomes harder to arrange, especially when components in different parts of the application need to communicate. The result can be components whose own functionality is overtaken by the need to pass on props for their descendants and relay events to their antecedents. In this chapter, I describe an alternative approach, known as dependency injection, which allows components to communicate without being tightly coupled to one another. I show you the different ways in which dependency injection can be used and demonstrate how it frees up the structure of an application. I also show you how to use an event bus, which combines dependency injection with the ability to register interest in custom events programmatically, allowing a component to send a custom event to any interested receiver, rather than just its parent. Table 18-1 puts dependency injection and event buses in context.