Summary

Throughout this chapter, we have explored how to enable data communication between components using props and custom events. We explored slots and saw how we enable UI template customization for a component from its parent. We also learned how to use refs to unlock integration opportunities with third-party JavaScript or DOM libraries by allowing us to access DOM elements directly.

We’re now able to create and compose components that clearly define their interfaces with inputs (props and slots) and outputs (rendered templates and events), while also visiting commonly faced use cases (such as wrapping a DOM library).

In the next chapter, we’ll look at advanced component composition patterns and techniques that enable better code reuse.