The power of slots

In the first few chapters of this book, we have learned how properties and events can be used for a parent and a child to communicate with each other. This method of communication is not very flexible, as the only way for a component to expose information is by creating a new property.

In many cases, the rigidity that properties provide is precisely what we want to make sure that our component renders correctly, but there are times when more flexibility is needed, and this is where slots come in.

Let’s consider our base button component. Its look and feel are defined by its properties and so is its value, but what would happen if we wanted to create a button with an icon before its value?

With our current knowledge of Vue.js, we would resort to creating a new prop of icon (prependIcon) that accepts an icon. Then, a further requirement may need us to add an icon after the value, so we would again resort to a new property of icon (appendIcon). Each...