Summary

Throughout this chapter, we have looked at Vue.js primitives that allow us to build components in such a way that they can be composed efficiently.

Props and slots are used to defer behavior within a component to whichever parent component is rendering them. Props, with their ability to be validated, are great for passing data into nested components. Slots are geared toward yielding control of rendering back to the parent component. Events enable child components to send data back to their parent, thus completing the parent-child communication cycle (props down, events up).

Global templating helpers can be encapsulated in filters to reduce boilerplate and increase code reuse. Refs unlock integration opportunities with third-party JavaScript or DOM libraries by allowing us to access DOM elements directly.

We're now able to compose and create components that clearly define their interfaces with inputs (props and slots) and outputs (rendered templates and events...